flex布局
# flex布局
# 概述
能够快速开发，并且不需要考虑脱标问题
# 开启弹性布局
提示
开启flex布局之后，里面的float、clear、vertical-align将失效
# 弹性容器
.father {
display: -webkit-flex; /* Safari */
display: flex;
}
1
2
3
4
5
2
3
4
5
# 主轴justify-content
| 属性值 | 作用 |
|---|---|
| flex-start | 从起点到终点 |
| flex-end | 从终点到起点 |
| center | 居中 |
| space-around | 两边空白，中间均匀 |
| space-between | 两端无空白，中间均匀 |
| space-evenly | 所有盒子间距相等 |
# 侧轴align-item
注意
单独设置弹性盒子的侧轴对齐方式：align-self，属性值相同
| 属性值 | 作用 |
|---|---|
| flex-start | 从起点到终点 |
| flex-end | 从终点到起点 |
| center | 居中 |
| stretch | 拉伸（去掉子级默认高度） |
提示
默认不设置属性值为拉伸效果
# flex：数值
提示
占用父盒子的剩余尺寸,数值表示份数 为flex-grow：数值（放大比例）、flex-shrink ：数值（缩小比例）、flex-basis：auto 主轴空间（main size）
# Demo演示占用剩余尺寸
可用F12开发者工具查看元素及样式，可打开codepen在线编辑代码。
# flex-direction
改变元素的排列方向
| 属性值 | 作用 |
|---|---|
| row | 行（水平） |
| column | 列（垂直） |
| row-reverse | 从右到左 |
| row-column | 从下到上 |
注意
先确定主轴对齐方式，再确定主轴或者侧轴的对齐方式
# flex-wrap
弹性盒子换行
| 属性值 | 作用 |
|---|---|
| wrap | 换行 |
| no-wrap | 不换行 |
注意
align-content属性可以设置列之间的属性，基本跟justify-content属性值相同
# order
属性定义子盒子的排列顺序。数值越小，排列越靠前，默认为0
如果想要详细了解flex布局，阮一峰flex布局
上次更新: 2023/01/29, 11:01:00