CSS——弹性盒
定义
弹性盒（Flexible Box，简称Flexbox）属性是一些与弹性盒子布局相关的CSS属性。
概述
弹性盒布局是 CSS3 规范中提出的一种新的布局方式。该布局模型的目的是提供一种更加灵活的方式来对一个容器中的条目进行排列、对齐和分配空白空间。
Flebox布局可以用来取代传统的float布局，让页面能够以一种简单高效的方式更好的适应不同的屏幕大小以及设备类型。
列表
元素 | 描述 |
|---|---|
align-content | 规定弹性内容的侧轴方向上右额外的空间时，如何排布每一行。当弹性容器只有一行时无作用。 |
align-items | 定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用 |
align-self | 设允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。 |
flex | flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 |
flex-basis | 定义了在分配多余空间之前，项目占据的主轴空间（main size）。 |
flex-direction | 决定主轴的方向（即条目的排列方向），可以是水平方向（自左向右，或自右向左），也可以是垂直方向（自上而下或自下而上） |
flex-grow | 定义条目的放大比例，默认为0，即如果存在剩余空间，也不放大。 |
flex-shrink | 定义条目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 |
flex-wrap | 定义如果一条轴线排不下所有条目，是否换你行或如何换行。 |
flex-flow | 定义条目在主轴上的对齐方式（左对齐，右对齐，居中，两端对齐，每个项目两侧的间隔相等） |
justify-content | 定义条目在交叉轴上如何对齐 |
order | 定义条目的排列顺序。数值越小，排列越靠前，默认为0。 |
编辑
变更点
弹性盒属性全部是CSS3新增加的。