小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

点个赞，收藏起来，防止您下次不会迷路哦 🎉

认识flex 🍻

传统布局与flex布局

传统布局

• 兼容性好
• 布局繁琐
• 局限性，不能很好的适配移动端

flex布局

• 操作方便，布局极为简单
• 移动端应用广泛

flex弹性布局

flex为弹性布局，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

当我们为父盒子设为flex布局以后，子元素的float、clear、vertical-align属性会失效

布局原理

采用flex布局的元素，成为flex容器。它的所有子 元素自动成为容器成员，称为flex项目。通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

flex父项常见属性 🥂

flex-direction

设置主轴的方向

属性值	说明
row	从左到右（默认值）
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

justify-content

定义在主轴上的子元素的对齐方式。！！使用之前要确定好主轴

属性值	说明
flex-start	从头开始，如果主轴是x轴，则从左到右（默认值）
flex-end	从尾部开始
center	居中对齐，如果主轴是x轴，则水平居中
space-around	每个子元素平分剩余空间
space-between	两边贴边，再平分剩余空间

flex-wrap

设置子元素是否换行。默认不换行，一行放不下时会自动减少子盒子在主轴上的长度，使子元素都放在一行。

属性值	说明
nowrap	不换行（默认值）
warp	换行
wrap-reverse	换行，从下到上

align-items

设置侧轴上的子元素排列方式（单行）

属性值	说明
flex-start	从头开始，如果主轴是x轴，则从上到下
flex-end	从下到上
center	居中对齐，如果主轴是x轴，则垂直居中
stretch	拉伸。！！子元素不能给高度

align-content

设置侧轴上的子元素排列方式（多行）。只有子元素出现换行时使用，单行下没有效果。

属性值	说明
flex-start	从头开始，如果主轴是x轴，则从上到下
flex-end	从下到上
center	居中对齐，如果主轴是x轴，则垂直居中
space-around	子元素平分剩余空间
space-between	两边贴边，再平分剩余空间
stretch	平分父元素高度（不设置子元素高度）

flex-flow

是flex-direction和flex-wrap的复合属性，设置主轴方向和是否换行

属性值	说明
如：row wrap	主轴是x轴且换行

最后🛴

Flex 能让你的网页更华丽 ✨

Flex属性都在这了，还不收藏吗 💖