认识 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	两边贴边，再平分剩余空间

flex-flow

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

如：row wrap	主轴是x轴且换行

最后🛴

Flex 能让你的网页更华丽 ✨

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