【CSS3】Flex弹性布局

文章目录


前言

弹性布局(Flexible Layout),也称为Flexbox布局,是CSS3主推的一种布局方式!!!


提示:以下是本篇文章正文内容,下面案例可供参考

一、基本概念

1.容器和项目:

使用display: flex;布局的元素(父元素)称为"容器",其所有子元素自动成为容器成员,称为"项目"。容器和项目是弹性布局的基本组成单位,它们各自拥有控制布局的属性。

2.主轴和交叉轴:

主轴是项目的排列方向,可以是水平方向(x轴)或垂直方向(y轴)。交叉轴则是与主轴垂直的轴,即绕主轴顺时针旋转90°得到的轴。

在复杂布局中,元素既可以是容器也可以是项目。

二、容器属性

1.flex-direction:决定主轴的方向,即x轴还是y轴

可选值 解释
row 从左到右(默认值)
row-reverse 从右到左
column 从上到下
column-reverse 从下到上

示例效果:
flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

2.flex-wrap:定义项目的换行方式

可选值 解释
nowrap 不换行(默认值)
wrap 换行,第一行在上方
wrap-reverse 换行,第一行在下方

示例效果:(主轴方向:默认从左到右)
flex-wrap: nowrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

3.flex-flow:flex-direction属性和flex-wrap属性的简写形式

比如实现水平从左到右排列,自动换行,第一行在上方,可自行尝试。

4.justify-content:定义项目在主轴上的对齐方式

可选值 解释
flex-start 起点对齐(默认值)
flex-end 终点对齐
center 居中对齐
space-between 两端对齐,项目之间的间隔相等
space-around 每个项目两侧的间隔相等,项目之间的间隔比项目与边框的间隔大一倍

示例效果:(主轴方向:默认从左到右)
justify-content: flex-start ;

justify-content: flex-end;

justify-content: space-between;

justify-content: space-around;

justify-content: center;

4.align-items:定义项目在交叉轴上的对齐方式

可选值 解释
flex-start 起点对齐
flex-end 终点对齐
center 中点对齐
baseline 项目的第一行文字的基线对齐
stretch 默认值,如果项目未设置高度或设为auto,将占满整个容器的高度

示例效果:(主轴方向:默认从左到右)
align-items: flex-start;

align-items: flex-end;

align-items: baseline;

align-items: center;

ps:以上属性均添加在设置display: flex;属性的元素中。

三、项目属性

1.order:定义项目的排列次序

数值越大排的越靠后,默认为0

2.flex-grow:定义项目的放大比例

  • 默认为0,即如果存在剩余空间,也不放大。
  • 当项目设置了该属性之后,原来的宽度或高度失效。
  • 父元素有多余的空间时,设置放大比例的元素会按照比例占据多余空间;当父元素空间不足时,项目会同等比例缩小。

示例效果:(主轴方向:默认从左到右)

设定flex父容器宽度为1200px,按如下设置项目的flex-grow属性
1:flex-grow: 1;
2:flex-grow: 2;
3:flex-grow: 3;

3.flex-shrink:定义项目的缩小比例

  • 默认为1,负值无效。
  • 当容器空间不足时,设置了flex-shrink属性的项目会按照比例缩小。
  • flex-shrink为0的项目则不会压缩。

4.flex-basis:定义项目在分配多余空间之前的默认大小

5.flex:flex-grow、flex-shrink和flex-basis的简写形式

默认值为0 1 auto。

6.align-self:允许单个项目在交叉轴上覆盖容器的align-items属性进行对齐

四、应用场景

弹性布局广泛应用于移动端网页开发,具有以下优点:

自适应性 :容器与元素的自适应特性使得页面能够快速适应不同尺寸的设备和屏幕分辨率。
灵活性 :提供了多种属性来控制布局,可以轻松地调整页面行为。
可读性 :语法简洁清晰,易于理解,便于开发者维护和修改。
适合复杂布局:能够更好地满足设计师和开发者的要求,实现更多样化、更灵活的网页布局效果。

五、完结撒花

学习并不是枯燥无味的,只是我们不懂得从中寻找快乐罢了。

相关推荐
Fantasywt3 小时前
THREEJS 片元着色器实现更自然的呼吸灯效果
前端·javascript·着色器
IT、木易4 小时前
大白话JavaScript实现一个函数,将字符串中的每个单词首字母大写。
开发语言·前端·javascript·ecmascript
张拭心6 小时前
2024 总结,我的停滞与觉醒
android·前端
念九_ysl6 小时前
深入解析Vue3单文件组件:原理、场景与实战
前端·javascript·vue.js
Jenna的海糖6 小时前
vue3如何配置环境和打包
前端·javascript·vue.js
星之卡比*7 小时前
前端知识点---库和包的概念
前端·harmonyos·鸿蒙
灵感__idea7 小时前
Vuejs技术内幕:数据响应式之3.x版
前端·vue.js·源码阅读
烛阴7 小时前
JavaScript 构造器进阶:掌握 “new” 的底层原理,写出更优雅的代码!
前端·javascript
Alan-Xia7 小时前
使用jest测试用例之入门篇
前端·javascript·学习·测试用例
浪遏7 小时前
面试官😏 :文本太长,超出部分用省略号 ,怎么搞?我:🤡
前端·面试