CSS | flex布局

1、什么是flex布局

flex 是 flexibleBox 的缩写，意为 “弹性布局”，是css3新增的内容。flex灵活性高，任何一个容器都可以指定为flex布局。flex布局的原理是，通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

2、flex布局的常用属性

2.1、常见父现属性

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

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

（2）justify-content：设置主轴上的子元素的排列方式
 

属性值	说明
flex-start	默认值，从头部开始
flex-end	从尾部开始排列
center	在主轴中居中对齐
space-around	从下到上
space-between	先两边贴边，再平分剩余空间

（3）flex-wrap：设置子元素是否换行
            默认情况下，所有子元素都排在一条线（“轴线”）上，flex-wrap属性定义，默认不换行，排不开会缩小显示

属性值	说明
nowrap	默认值，不换行
wrap	换行

（4）align-content：设置侧轴上的子元素的排列方式（只对多行有效，单行无效）

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

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

属性值	说明
flex-start	默认值，从上到下
flex-end	从下到上
center	居中
stretch	拉伸

（6）flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
            flex-fow：row wrap
    
 

 

2.2、常见子项属性

（1）flex：设置子项目占的分数

（2）align-self：控制子项目自己在侧轴的排列方式
        可以允许单个子元素与其他子元素有不一样的对齐方式，可以覆盖align-items属性。
        默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等于stretch。

（3）order：定义子元素的排列顺序
        数值越小，排列越靠前，默认为0