flex 布局
flex只是css3的一个属性 ，flex又称‘弹性布局’，它使得盒子的子元素可以自动排列
{
display:flex;
}
经典的flex模型图：
响应式布局之——flex
说明：
- 主轴不一定是横向的，它和侧轴垂直，由 flex-direction 属性决定
- flex item 不指定高度时，等于父元素的高度（换行则比例平分）
flex-container 相关属性
display:flex / inline-flex 都是flex布局， inline类似 inline-block ，盒子被加入了inline模型特性
1. flex-direction
flex-direction 决定了主轴和主轴方向，子元素顺着主轴的方向依次排列
- row 默认值，主轴水平向右（元素水平向右排列）
- column 主轴垂直向下（元素垂直向下排列）
- row-reverse 水平反向（向左）
- column-reverse 垂直反向（向上）
注：主要是row和column
示例：
响应式布局之——flex
2. justify-content
所有子元素沿主轴的排列方式（单行多行都可）
- flex-start 默认值
- center
- flex-end
- space-between
- space-around
示例：
响应式布局之——flex
3. align-content
侧轴有长度时，所有子元素沿侧轴的排列方式，只适用于多行的情况（wrap）
- strech 默认值，不排列，高度比例平分父元素
- flex-start
- center
- flex-end
- space-between 两端对齐，第一行放起点，最后一行放终点，其他行保持间距相等
- space-around 元素被空间环绕，所有行的间距都相等，起点和终点的距离元素间距是行间距的一半
示例：
响应式布局之——flex
4. align-items
侧轴有长度时，每个子元素沿侧轴的排列方式
- strech 默认值，不排列，高度自适应父元素
- flex-start 子元素沿侧轴起始点排列
- center 中心点
- flex-end 终点
- baseline 根据第一个子元素的基线（content） 排列
示例：
响应式布局之——flex
5. flex-wrap
此属性指定子元素是否换行
- nowrap 默认，不换行，如果子元素总长度大于父元素则等比压缩
- wrap 换行，排不下的元素换行沿侧轴排列 ，如果高度不够则会超出
- wrap-reverse 侧轴反向
注：侧轴其他操作，优先执行wrap
6. flex-flow
flex-flow:'direction' 'wrap' 是 flex-direction 和 flex-wrap 的组合，方便简写，类似 background
flex-item 相关属性
1. order
order:num 用来指定子元素的顺序，默认0，值大的排在后面，也可以是负数
2. flex-grow
flex-grow:num 用来指定扩展分配比例，所有子元素长度小于父元素长度时，添加此属性的子元素，会按比例来分配剩余的宽度
3. flex-shrink
flex-shrink:num 在未指定wrap时，用来指定压缩比例（减去 压缩的总长度百分比），默认1
4. flex-basis
flex-basis:px 类似grow，分配剩余长度（像素），总和大于剩余宽度时，按比例分配
5. align-self
align-self:xx 指定元素自身的排列方式，优先级高于 align-items，值类似
应用
一个盒子多个子元素，最后一个子元素高度自适应
关键：flex-grow:1 分配剩余高度 | flex-shrink:0空间不够时不压缩
最后一个子元素如果高度没被其孩子撑高，直接flex-grow: 1即可。
如果撑的比剩余高度还要高，那么其余的子元素高度会按比例缩小（默认值造成），此时需要修改为flex-shrink:0
例子： https://jsfiddle.net/779102260/6tgym82e/
居中
元素居中使用flex十分简单
- 水平居中：justify-content: center;
- 垂直居中：align-items: center;
image.png
上中下布局
上下固定高度，中间自适应高度
image.png
body{
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
#header{
background: #ccc;
height: 100px;
}
#main{
background: #ddd;
flex-grow: 1; /*剩余的高度分配给main*/
}
#footer{
background: #bbb;
height: 60px;
}
左侧固定右侧自适应
image.png
body{
padding: 0;
margin: 0;
display: flex;
height: 100vh;
}
#left{
background: #ccc;
width: 200px;
}
#right{
background: #ddd;
flex-grow: 1;
}
