css3中引入了新的flex布局方式
布局
当父容器设置了成了flex容器，那么它的直接子元素就变成了 flex-items
flex-items 有如下属性
- items 显示在row中（有flex-direction属性的默认值 row）
- items 从主轴的开始位置开始布局
- items 不拉伸尺寸，但是可以收缩尺寸
- items 将延次轴拉伸 (align-items: stretch 默认是伸缩的)
- flex-basis属性默认是 auto
- flex-wrap 属性默认是 nowrap
<div class="container">
<div class="item"></div>
</div>
.container {
display: flex // 启用flex布局 或者 inline-flex 来启用
}
flex布局有两个轴， 一个是主轴 一个次轴
用 flex-direction 来申明主轴的方向
flex-direction: row row-reverse column column-reverse （可能取值）
主轴
次轴
次轴是垂直与主轴的，一般设置了主轴，那么也就确定了次轴
换行
flex-wrap 决定主轴是否换行
flex-wrap: nowrap wrap
- nowrap 不换行，如果items长度大于父容器的容纳长度，就会自动收缩
- wrap 会换行，保持宽度不变化
flex-flow 是 flex-direction 和 flex-wrap的简写
对齐
align-items 次轴对齐方式
stretch(默认值) flex-start flex-end center baseline
align-self 控制一个独立的flexitem 在次轴上的对齐
align-content 浏览器控制怎么平分次轴上的空白
start center space-between space-around
justify-content 主轴对齐方式
flex-start flex-end center space-around space-between space-evenly
items控制
沿着主轴控制属性
flex-grow
表示这个项目沿着主轴分布多少物理空间
flex-shink
表示这个项目可以压缩物理空间
flex-basis
定义这个items默认占用多少宽度（沿着主轴方向上）
属性简写
flex: initial
flex: auto
flex: none
flex: <positive-number>
flex: initial 相当于 flex: 0 1 auto;
flex: auto 相当于 flex: 1 1 auto;
flex: none 相当于 flex: 0 0 auto;
flex: 1 1 0 这个items的宽度的伸缩是相对于flex-basis 0开始的
order 定义顺寻
