css3之flex弹性布局

flex

flex-direction

横向的主轴的方向
row row-reverse column column-reverse

flex-wrap

flex-wrap 指定 flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向。
当数目过多时，可以选择是否换行

• nowrap flex 的元素被摆放到到一行，这可能导致溢出 flex 容器。 cross-start 会根据 flex-direction 的值 相当于 start 或 before。

• wrap flex 元素 被打断到多个行中。cross-start 会根据 flex-direction 的值选择等于start 或before。cross-end 为确定的 cross-start 的另一端。

• wrap-reverse
  和 wrap 的行为一样，但是 cross-start 和 cross-end 互换。

flex-flow

flex-direction和flex-wrap的复合属性

justify-content

定义了项目在主轴上的对齐方式
flex-start 左对齐
flex-end 右对齐
center 居中
space-between 两端对齐（项目间间隔相同）
space-around 两端间隔对齐（项目间间隔是项目与边框间隔的2倍）

align-items

交叉轴上对齐方式
stretch 未设置高度的项目占满整个容器高度
flex-start 交叉轴起点对齐
flex-end：交叉轴终点对齐
center：交叉轴中点对齐
baseline：项目第一行文字的基线对齐

align-content

align-content属性定义多根轴线的对齐方式
stretch：轴线占满整个交叉轴（默认值）
flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线间间隔相等
space-around：每根轴线两侧的间隔都相等
flex-start | flex-end | center | space-between | space-around | space-evenly | stretch

order

order允许我们自定义项目的排列顺序
默认为0，属性值是数字，数值越小越靠前

flex-grow

flex-grow定义项目的放大比例
默认是0，就是如果没有占满容器整行，也不放大项目，就像上面的图片

flex-shrink

flex-shrink定义项目的缩小比例
flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

flex-basis

flex-basis定义在分配多余空间之前，项目占据的主轴空间
flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小。

.flex-item:nth-child(1) {    ......    flex-basis: 150px; <--}

flex

flex是flex-grow、flex-shrink、flex-basis的复合属性
默认值：0 1 auto，后两个属性可选

align-self

align-self属性允许个别项目拥有与众不同的对齐方式
默认值auto，继承弹性容器的align-items属性值

auto 设置为父元素的 align-items 值，如果该元素没有父元素的话，就设置为 stretch
stretch flex 元素将会基于容器的宽和高，按照自身 margin box 的 cross-size 拉伸。
flex-start flex 元素会对齐到 cross-axis 的首端。
flex-end
center
baseline