CSS的flex布局

flex弹性布局的优缺点:

• 操作方便,布局极为简单,移动端应用很广泛
• pc端浏览器支持情况较差
• IE 11或者更低版本,不支持或仅支持部分

布局原理

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

• 当我们为父盒子设为flex布局以后,子元素的float、clear(浮动、清除浮动)和vertical-align(垂直居中)属性将失效
• 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

注:flex布局原理就是通过给父盒子添加flex属性,来控制子盒子的位置盒排序方式 

flex布局父项常见属性

flex-direction:设置主轴的方向

//给父级添加flex属性
flex-direction:row || row-reverse || column || column-reverse
//(默认值从左到右||从右到左||从上到下||从下到上)

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

justify-content:flex-start || flex-end || center || space-around || space-between
//默认值从头部开始 如果主轴是x轴,则从左到右||
//从尾部开始排列||
//在主轴居中对齐(如果主轴是x轴则水平居中)||
//平分剩余空间||
//先两边贴边 再平分剩余空间(重要)

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

flex-wrap:nowrap || wrap
//默认不换行||换行

align-content:设置侧轴上的子元素的排序方式(多行)

align-content:flex-start|| flex-end || center || space-around ||space-between ||stretch
//默认值在侧轴的头部开始排列
//在侧轴的尾部开始排列
//在侧轴中间显示
//子项在侧轴平分剩余空间
//子项在侧轴先分布在两头,再平分剩余空间
//设置子项元素高度平分父元素高度

align-items:设置侧轴上的子元素排列方式(单行)

align-items:flex-start || flex-end || center || stretch
//默认值从上到谢||从下到上||挤在一起居中(垂直居中)||拉伸(但是子盒子不要高度)

flex-flow:复合属性,相当于同时设置了flex-direction盒flew-wrap

flex-flow:row wrap

主轴和侧轴同样的叫法有:行和列、x轴和y轴

• 默认主轴方向就是x轴方向,水平向右
• 默认侧轴方向就是y轴方向,水平向下

 flex布局子项常见属性

• flex子项目占的份数
• align-self控制子项自己在侧轴的排列方式(flex-start||flex-end||center)
• order属性定义子项的排列顺序(前后顺序)

.item{
   flex:<number>;//default 0
}