flex布局

flex布局原理

• flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。

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

  • 因为flex布局可以让子元素一行显示，不需要浮动，所以就不需要清除浮动
  • flex布局还可以设置盒子垂直居中，之前只能设置水平居中。

• flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局

• 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。

• 它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

• 总结：就是通过给父盒子添加display:flex属性，来控制子盒子的位置和排列方式

父项常见属性

• flex-direction：设置主轴的方向 （direction：方向）

row	默认从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

• justify-content：设置主轴上的子元素排列方式 （justify： [ˈdʒʌstɪfaɪ] ，证明…有理。content：内容）

属性值	说明
flex-start	默认从头部开始
flex-end	从尾部开始
center	居中对齐
space-around	平分剩余空间
space-between	先贴两边再评分空间

• flex-wrap：设置子元素是否换行

nowrap	不换行
wrap	换行

• align-content：设置侧轴上的子元素的排列方式（多行）

flex-start	从头开始
flex-end	从尾部开始
center	居中显示
strech	拉伸
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头,再平分剩余空间

• align-items：设置侧轴上的子元素排列方式（单行）

flex-start	从头开始
flex-end	从尾部开始
center	居中显示
strech	拉伸

• flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

flex布局子项常见属性

flex属性:定义子项分配剩余空间,用flex来表示占了多少份.

align-self控制子项自己在侧轴上的排列方式

order属性定义项目的排列顺序
数值越小,排列越靠前,默认为0