当前位置：首页 > news >正文

【CSS3】Flex弹性布局

news 来源：原创 2025/7/28 13:29:59

文章目录

前言
一、基本概念
- 1.容器和项目：
- 2.主轴和交叉轴：
二、容器属性
- 1.flex-direction：决定主轴的方向，即x轴还是y轴
- 2.flex-wrap：定义项目的换行方式
- 3.flex-flow：flex-direction属性和flex-wrap属性的简写形式
- 4.justify-content：定义项目在主轴上的对齐方式
- 4.align-items：定义项目在交叉轴上的对齐方式
三、项目属性
- 1.order：定义项目的排列次序
- 2.flex-grow：定义项目的放大比例
- 3.flex-shrink：定义项目的缩小比例
- 4.flex-basis：定义项目在分配多余空间之前的默认大小
- 5.flex：flex-grow、flex-shrink和flex-basis的简写形式
- 6.align-self：允许单个项目在交叉轴上覆盖容器的align-items属性进行对齐
四、应用场景
五、完结撒花

前言

弹性布局（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属性进行对齐

四、应用场景

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

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

五、完结撒花

学习并不是枯燥无味的，只是我们不懂得从中寻找快乐罢了。
在这里插入图片描述