flex布局

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 （可能取值）

主轴

主轴取值row 主轴取值 column

次轴

次轴是垂直与主轴的，一般设置了主轴，那么也就确定了次轴

换行

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 定义顺寻