web前端布局之flex布局

1. 总的来说，flex布局的原理通过给父元素添加flex属性，来控制子元素的位置和排列方式。
2. 采用flex布局的元素称为flex容器。
3. flex容器中存在两条轴，分别为主轴和侧轴，容器中的每个单元称为flex项目。
4. 在容器上可以设置6个属性：分别为：（flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content这样说可能会好记一点）
   • flex-direction 设置主轴的方向；（有4个属性值：row、row-reverse、column、column-reverse）
   • justify-content设置主轴子元素排列方式（有5个属性值：flex-start、flex-end、center、space-around、space-between）
   • flex-wrap设置子元素是否换行（有两个属性值：nowrap、wrap）
   • align-items设置侧轴子元素排列方式，单行（有4个属性：flex-stsrt、flex-end、center、stretch）
   • align-content设置侧周子元素排列方式，多行（有6个属性：flex-start、flex-end、center、space-around、space-between、stretch）
   • flex-flow是flex-direction和flex-wrap的合写。

5.但要注意的是，但设置了flex布局之后，子元素的float、clear、vertical-align的属性将会失效。

6.另外，flex布局的flex项目上可以设置3 个属性：分别为

• flex属性，定义子项目分配剩余空间，f用flex来表示占多少份数
• order属性，定义自项排列顺序，数值越小，排列越靠前，默认为0
• align-self属性，设置自项自己在侧轴上额排列方式