flex 布局查漏补缺
平时开发各种布局基本上可以 flex 一把梭，不用再纠结 float 这个神奇属性了。但一直又没有专门去记忆一下 flex 的属性，开发的时候还是顺手百度下属性的含义，略显不够专业[旺柴]。索性抽时间把每个属性就都总结下吧，查漏补缺。
总览
flex
下边按照上图的顺序来详细说明下每个属性的作用，并且参考 W3C 提到的代码结构：
<!DOCTYPE html>
<html>
<head>
<style>
// 父元素
.flex-container {
display: flex;
flex-direction: row;
background-color: DodgerBlue;
}
// 子元素
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
代码总体结构都是上边的样子，下边介绍的时候就省略了。
各属性
flex
★ display: flex; ”
父元素变为 flex 布局，并且为 block 块级元素。
.flex-container {
display: flex;
background-color: DodgerBlue;
margin: 10px;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="flex-container">
<div>4</div>
<div>5</div>
<div>6</div>
</div>
★ display: inline-flex; ”
父元素变为 flex 布局，并且是行内元素。
.flex-container {
display: inline-flex;
background-color: DodgerBlue;
margin: 10px;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="flex-container">
<div>4</div>
<div>5</div>
<div>6</div>
</div>
两个元素会在同一行展示。
flex-direction
★ display: flex/inline-flex -> 父元素 -> flex-flow: -> flex-direction: -> row ”
row 为默认值
.flex-container {
display: flex;
flex-direction: row;
background-color: DodgerBlue;
}
在水平方向从左到右排列，同时决定了主轴为水平方向。
★ display: flex/inline-flex -> 父元素 -> flex-flow: -> flex-direction: -> row-reverse ”
.flex-container {
display: flex;
flex-direction: row-reverse;
background-color: DodgerBlue;
}
在水平方向从右到左排列，同时决定了主轴为水平方向。
★ display: flex/inline-flex -> 父元素 -> flex-flow: -> flex-direction: -> column ”
.flex-container {
display: flex;
flex-direction: column;
background-color: DodgerBlue;
}
在垂直方向从上到下排列，同时决定了主轴为垂直方向。
★ display: flex/inline-flex -> 父元素 -> flex-flow: -> flex-direction: -> column-reverse ”
.flex-container {
display: flex;
flex-direction: column-reverse;
background-color: DodgerBlue;
}
在垂直方向从下到上排列，同时决定了主轴为垂直方向。
下边为了简明，各属性都是默认主轴为水平方向进行举例
flex-wrap
★ display: flex/inline-flex -> 父元素 -> flex-flow: ->flex-wrap: -> wrap ”
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: DodgerBlue;
}
当空间不够的时候自动换行。
★ display: flex/inline-flex -> 父元素 -> flex-flow: -> flex-direction: -> nowrap ”
nowrap 为默认值。
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: DodgerBlue;
}
当空间不够不进行换行，默认会进行压缩。
★ display: flex/inline-flex -> 父元素 -> flex-flow: -> flex-direction: -> wrap-reverse ”
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
background-color: DodgerBlue;
}
在水平方向从左到右排列，同时使交叉轴的排列方向反向。
默认交叉轴是垂直方向，并且是从上到下。所以加了 wrap-reverse 就是从下到上了。
flex-flow
★ display: flex/inline-flex -> 父元素 -> flex-flow: ”
上边介绍的 flex-direction 和 flex-wrap 可以合写为 flex-flow ，它们共同决定了主轴和交叉轴的排列方向，从左到右（从右到左）和从上到下（从下到上）的组合。
.flex-container {
display: flex;
flex-flow: row-reverse wrap-reverse;
background-color: DodgerBlue;
}
主轴为水平方向，row-reverse 从右到左，wrap-reverse 交叉轴从下到上。
justify-content
★ display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> （主轴-默认水平方向）justify-content: -> center ”
.flex-container {
display: flex;
justify-content: center;
background-color: DodgerBlue;
}
子元素居中
image-20211129094950145
★ display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> （主轴-默认水平方向）justify-content: -> flex-start ”
.flex-container {
display: flex;
justify-content: flex-start;
background-color: DodgerBlue;
}
子元素靠左对齐，并且 flex-start 为默认值。
image-20211130080749495
★ display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> （主轴-默认水平方向）justify-content: -> flex-end ”
.flex-container {
display: flex;
justify-content: flex-end;
background-color: DodgerBlue;
}
子元素靠右对齐。
image-20211130081000845
★ display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> （主轴-默认水平方向）justify-content: -> space-around ”
.flex-container {
display: flex;
justify-content: space-around;
background-color: DodgerBlue;
}
子元素均匀分布，元素之间的空白是两边的两倍。
image-20211130081237620
★ display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> （主轴-默认水平方向）justify-content: -> space-between ”
.flex-container {
display: flex;
justify-content: space-between;
background-color: DodgerBlue;
}
子元素均匀分布，两边不留白。
image-20211130081549052
★ display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> （主轴-默认水平方向）justify-content: -> space-evenly ”
.flex-container {
display: flex;
justify-content: space-evenly;
background-color: DodgerBlue;
}
子元素真均匀分布，空白全部相同。
image-20211130081932235
align-items
★ display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> （交叉轴-默认垂直方向）align-items: -> center ”
.flex-container {
display: flex;
height: 200px;
align-items: center;
background-color: DodgerBlue;
}
子元素垂直方向居中。
image-20211130082846108
★ display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> （交叉轴-默认垂直方向）align-items: -> flex-start ”
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
background-color: DodgerBlue;
}
子元素垂直方向顶部。
image-20211130083006758
★ display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> （交叉轴-默认垂直方向）align-items: -> flex-end ”
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
background-color: DodgerBlue;
}
子元素垂直方向底部。
image-20211130083115323
★ display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> （交叉轴-默认垂直方向）align-items: -> stretch ”
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
background-color: DodgerBlue;
}
子元素垂直方向拉伸，stretch 为默认值。
image-20211130083228595
★ display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> （交叉轴-默认垂直方向）align-items: -> baseline ”
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
background-color: DodgerBlue;
}
<div class="flex-container">
<div><h1>1</h1></div>
<div><h6>2</h6></div>
<div><h3>3</h3></div>
<div><small>4</small></div>
</div>
当字体大小不一致的时候，根据字体的 baseline 对齐。
image-20211130083432539
align-content
★ display: flex/inline-flex -> 父元素 -> 多行元素的对齐方式 -> （交叉轴-垂直方向）align-content: -> space-between ”
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
background-color: DodgerBlue;
}
垂直方向，均匀分布，顶部底部没有空白。
image-20211130084315882
★ display: flex/inline-flex -> 父元素 -> 多行元素的对齐方式 -> （交叉轴-垂直方向）align-content: -> space-around ”
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
background-color: DodgerBlue;
}
垂直方向，均匀分布，顶部底部有空白，是元素之前空白的一半。
image-20211130084802439
★ display: flex/inline-flex -> 父元素 -> 多行元素的对齐方式 -> （交叉轴-垂直方向）align-content: -> space-evenly ”
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-evenly;
background-color: DodgerBlue;
}
垂直方向，真均匀分布，空白全部相同。
image-20211130085611844
★ display: flex/inline-flex -> 父元素 -> 多行元素的对齐方式 -> （交叉轴-垂直方向）align-content: -> stretch ”
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
background-color: DodgerBlue;
}
垂直拉伸占据空间剩余的空间，stretch 为默认值。
image-20211130084946459
★ display: flex/inline-flex -> 父元素 -> 多行元素的对齐方式 -> （交叉轴-垂直方向）align-content: -> flex-start ”
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
background-color: DodgerBlue;
}
垂直方向，顶部对齐。
image-20211130085211401
★ display: flex/inline-flex -> 父元素 -> 多行元素的对齐方式 -> （交叉轴-垂直方向）align-content: -> flex-end ”
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
background-color: DodgerBlue;
}
垂直方向，底部对齐。
image-20211130085257855
order
★ display: flex/inline-flex -> 子元素 -> order ”
.flex-container {
display: flex;
background-color: #f1f1f1;
}
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
根据 order 排列。
image-20211130093043919
flex-grow
★ display: flex/inline-flex -> 子元素 -> flex -> flex-grow ”
.flex-container {
display: flex;
background-color: #f1f1f1;
}
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>
当有剩余空间时，是否进行拉伸，默认值 0 ，不拉伸。
有多个元素设置 flex-grow 的时候，值代表他们要增加的长度各自占额外空间的比例。
image-20211130093159628
flex-shrink
★ display: flex/inline-flex -> 子元素 -> flex -> flex-shrink ”
.flex-container {
display: flex;
background-color: #f1f1f1;
}
.flex-container>div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
当空间不足时，是否进行压缩，默认值是 1，进行压缩，0 代表不压缩。
有多个元素设置 flex-shrink 的时候，值代表他们各自占要减少空间的比例。
image-20211130094702390
flex-basis
★ display: flex/inline-flex -> 子元素 -> flex-> flex-basis ”
.flex-container {
display: flex;
background-color: #f1f1f1;
}
.flex-container>div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis:200px">3</div>
<div>4</div>
</div>
主轴方向初始的宽度。
image-20211130095156537
flex
★ display: flex/inline-flex -> 子元素 -> flex ”
flex-grow、 flex-shrink 、 flex-basis 三个属性的合并写法。
.flex-container {
display: flex;
background-color: #f1f1f1;
}
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex: 0 0 200px">3</div>
<div>4</div>
</div>
image-20211201072712816
align-self
和 align-items 的属性相同，优先级更高，覆盖父元素的属性。
.flex-container {
display: flex;
height: 200px;
background-color: #f1f1f1;
}
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>
默认是 stretch，3 元素将会居中。
image-20211201073714384
举几个🌰
卡片类的
图文垂直居中的
image-20211201095347875
靠左靠右的，这种除了用 space-between ，也可以给右边的元素设置 margin-left: auto;。
image-20211201095812357
等等还有很多，基本上 flex 都可以搞定。
总
上边就是 flex 的常用属性（不是全部）了，掌握以后就可以更加愉快的做「切图仔」了！
这些属性主要就是两类，一类决定排列的方向（从上到下、从下到上、从左到右、从右到左），一类决定对齐的方式（居中、居上、居下等）。
腾讯云开发者
