认识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属性都在这了,还不收藏吗 💖

更新于

请我喝[茶]~( ̄▽ ̄)~*

boW 微信支付

微信支付

boW 支付宝

支付宝

boW 贝宝

贝宝