flex布局

优点

操作 方便，布局简单 移动端应用广泛

PC端浏览器支持情况较差

低版本浏览器不支持

布局原理

flexible box的缩写  “弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局

采用flex布局的元素称为flex container，所有子元素自动成为容器成员，称为flex项目

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

伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

常见父项属性

flex-direction：设置主轴方向（x轴），即项目排列的方向

属性值说明

row默认值从左到右

row-reverse从右到左

column从上到下

column-reverse从下到上

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

定义了项目在主轴上的对齐方式，注意，使用这个属性之前一定要确定好主轴的哪个

 

flex-start  默认值 从头部开始 如果主轴是x轴则从左到右

flex-end   从尾部开始排列

center  在主轴居中对齐（如果是主轴是x轴则水平居中）

space-around  平分剩余空间

space-between  先两边贴边，再平分剩余空间

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

nowrap  默认值，不换行

wrap 换行

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

flex-start  默认值再侧轴的头部开始排列

flex-end  在侧轴的尾部开始排列

center  在侧轴中间显示

space-around  子项在侧轴平分剩余空间

space-between  子项在侧轴先分布在两头，再平分剩余空间

stretch  设置子项元素高度平分父元素高度

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

flex-start  从上到下

flex-end  从下到上

center  挤在一起居中（垂直居中）

stretch  拉伸（默认值）（但是不能给高度）

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

子项属性

flex属性：

定义子项目分配剩余空间，用flex来表示占多少份数,默认分数为0

.item{

flex: <number>;

}

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

align-self  属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

order属性定义项目的排列顺序

数值越小，排列越靠前，默认为0

作者：Gu愿
链接：https://www.jianshu.com/p/714f8016ee63
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。