HTML5语言—— 弹性布局让你的网页更加易于掌控，flex属性 前段大G > 首页 > 点击排名 >
什么是弹性布局？
弹性布局是网页布局的进阶，使用css样式来控制网页的走向，让网页上的元素更加容易掌控，更加方便简洁，更省时省力。网页中任何标签添加“display:flex;”样式就会变成弹性盒子，弹性盒子是由容器，元素组成，最大的父元素就是容器，子元素就是元素。弹性盒子里面有两条轴线，一条是Y轴，一条是X轴，添加样式之后默认的样式为主轴，从左往右排序。
和其他布局的区别
其他布局：
flex布局
兼容性差
移动端繁琐
操作方便，灵活易懂，移动端使用非常广泛
PC端浏览器支持flex比较少
用的最多的就是响应式
注释：
PC端浏览器支持flex比较少
用的最多的就是响应式
制作移动端可使用弹性布局
制作自适应或者PC端建议使用传统布局
制作自适应或者PC端建议使用传统布局
容器和项目
添加display：flex；样式之后，元素成为flex布局。被称之为容器
容器中所有的元素都会变成容器成员，被称之为项目。使用弹性盒子时，一定要注意两条线，一条X轴，一条Y轴。
主轴方向
X轴对齐方式：flex-direction
| 属性值 | 用法 |
| row | 默认样式，在X轴起点向终点依次排序 |
| row-reverse | 在X轴上终点向起点依次排序 |
| column | 在Y轴上起点向终点依次排序 |
| column-reverse | 在Y轴上起点向终点依次排序 |
注释：主轴方向就像流水，X为起点从左往右，终点反之。Y轴为起点从上往下。终点反之。
1.row
默认样式，弹性元素在X轴上正序排序
flex-direction: row;
/*代码内一直加有外边距，所以有多余的空白*/
2.row-resverse
弹性元素在X轴上倒序排序
flex-direction: row-resverse;
/*代码内一直加有外边距，所以有多余的空白*/
3.column
弹性元素在Y轴上正序排序
flex-direction: column;
/*代码内一直加有外边距，所以有多余的空白*/
2.column-resverse
弹性元素在Y轴上倒序排序
flex-direction: column-resverse;
/*代码内一直加有外边距，所以有多余的空白*/
X轴对齐
X轴对齐方式：justify-content
| 属性值 | 用法 |
| flex-start | 在X轴上，从左往右依次排序 |
| flex-end | 在X轴上，从右往左依次排序 |
| center | 居中在X轴上 |
| space-around | 盒子，空白平均分布，空白分布X轴起点和终点 |
| space-between | 盒子，空白平均分布，空白放在每个盒子两边 |
| space-evenly | 盒子，空白都平均分布 |
默认样式，弹性元素从左往右依次排序，X轴起点为开始，终点为结束，整体从左往右，
justify-content: flex-start;
/*代码内一直加有外边距，所以有多余的空白*/
显示效果：右为空白
2.flex-end
弹性元素从右往左依次排序，X轴终点为开始，起点为结束，整体从右往左，
justify-content: flex-end;
显示效果：左为空白
3.center
标签居中，两侧间隙相等
justify-content: center;
显示效果：两侧为白色
4.space-around
标签两边的间距是中间的一半（50%）
justify-content: space-around
显示效果：两边是中间的一半（50%）
5.flex-between
每个间距距离都相等，没有两侧空白
justify-content: space-between;
显示效果：1和2，2和3中间的间距相等
6.flex-evenly
每个间距距离都相等，加上两侧空白
justify-content: space-evenly;
显示效果：1和4两侧的距离相等
Y轴排列方式
Y轴排列方式：align-content| 属性值 | 用法 |
| flex-start | 在Y轴上，从上往下依次排序 |
| flex-end | 在Y轴上，从下往上依次排序 |
| center | 居中在Y轴上 |
| stretch | Y轴上延伸占满父标签的高 |
1.flex-strat
默认样式沿着Y轴的起点定位子标签位置，仅在子标签多到可以换行时使用
align-content: flex-start;
/*代码内一直加有外边距，所以有多余的空白*/
/*代码内一直加有外边距，所以有多余的空白*/
显示效果：下面空白
2.flex-end
沿着Y轴的终点定位子标签位置，仅在子标签多到可以换行时使用
align-content: flex-end;
显示效果：下面空白
3.center
沿着Y轴的中间定位子标签位置，仅在子标签多到可以换行时使用
align-content: center;
显示效果：上下空白，平均分布
4.space-around
平均分布Y轴上下空白是中间空白的（50%）,因为第二行的下空白和第三行的上空白合在了一起
align-content: space-around;
显示效果：上下空白是中间空白的（50%）
4.space-between
平均分布Y轴上下空白是中间空白的（50%）,因为第二行的下空白和第三行的上空白合在了一起
align-content: space-between;
显示效果：上下没有空白，中间平分空白
5.stretch
子标签在Y轴上占满每一行的高度，在不设置子标签高度的情况下，子标签高度取决于：（父标签的高度➗总行数＝子标签的高度）；
align-content:stretch;
是否换行
元素是否换行：flex-wrap
| 属性值 | 用法 |
| nowarp | 默认样式，不换行不换列，子标签自动适应宽度 |
| wrap | 子标签一行宽度大于父元素自动换行换列，正序 |
| wrap-reverse | 子标签一行宽度大于父元素自动换行换列，倒叙 |
注释：主轴方向就像流水，X为起点从左往右，终点反之。Y轴为起点从上往下。终点反之。
1.wrap
默认样式，弹性元素自动换行换列
flex-direction: wrap;
/*代码内一直加有外边距，所以有多余的空白*/
2.wrap-reverse
默认样式，弹性元素自动换行换列
flex-direction: wrap-reverse;
/*代码内一直加有外边距，所以有多余的空白*/
Y轴对齐
元素是否换行：align-items
| 属性值 | 用法 |
| flex-start | 默认样式,在X轴和Y起点的交界处 |
| flex-end | X轴和Y终点的交界处 |
| center | X轴和Y交界处 |
| stretch | 高度不设置为前提，铺满整个高度 |
| baseline | 位于容器的X线上 |
1.flex-start
默认样式，在X轴和Y起点的交界处
align-items: flex-start;
/*代码内一直加有外边距，所以有多余的空白*/
2.flex-end
默认样式，在X轴和Y起点的交界处
align-items: flex-end;
/*代码内一直加有外边距，所以有多余的空白*/
3.center
默认样式，在X轴和Y起点的中间上下空白平分
align-items: center;
/*代码内一直加有外边距，所以有多余的空白*/
3.stretch
默认样式，不设置高为前提，自动铺满父标签的高
align-items: stretch;
/*代码内一直加有外边距，所以有多余的空白*/
3.baseline
默认样式，字体大小不一，在同一条线上
align-items: baseline;
/*代码内一直加有外边距，所以有多余的空白*/
简写
是flex-direction和flex-wrap的合体简写：flex-flow
| 属性值 | 用法 |
| row,wrap | 指定X轴正序排序可以换行 |
| column,wrap | 指定Y轴正序排序可以换行 |
| row-reverse,wrap | 指定X轴倒叙排序可以换行 |
| column-reverse,wrap | 指定Y轴倒序排序可以换行 |
| (row或column),wrap或wrap-reverse或nowrap） | （X轴正序/Y轴正序），(可以换行/倒叙相反换行/不换行) |
默认样式，字体大小不一，在同一条线上
align-items: row wrap|row-reverse wrap|column wrap|column-reverse wrap|row nowrap|column nowrap|;
/*参数可以随意组合*/
这篇HTML5语言—— 弹性布局让你的网页更加易于掌控，flex属性，文章就结束了，有不懂的地方可以联系站长。希望每个前端人员都有可以找到一个好工作，谢谢观看，祝您生活愉快。
2023-12-04 14:38
文章点击量：
作者：【前端大G】
