弹性盒模型

Flexble Box

弹性容器（flex container）
弹性子元素（flex item）
主轴（main axis）、侧轴（cross axis）
弹性子元素排列起始位置：主轴开始（main start）、侧轴开始（cross start）
结束位置：主轴结束（main end）、侧轴结束(cross end)

属性

flex-direction
row
row-reverse
column
column-reverse

flex-wrap
设置弹性子元素超出弹性容器范围是否换行
rowrap不换行
wrap换行
wrap-reverse逆序换行
flex-flow
符合属性，设置子元素排序方式
flex-direction
flex-wrap
justify-content
flex-start
flex-end
center
space-between
space-around

align-items
弹性子元素在侧轴上的对齐方式

align-content
当侧轴有空白且有多行时，弹性子元素在侧轴上的对齐方式
stretch
flex-start
flex-end
center
space-between
space-around
order
integer
弹性子元素的顺序，数字小的排前面
flex-grow
number
扩展比例，不允许负值，默认值为0。根据比例分配剩余空间

flex-shrink
number
收缩比例

flex-basis
length
percentage
auto
伸缩基准值
flex
复合属性，分配弹性子元素的空间
none
flex-grow
flex-shrink
flex-basis
align-self
auto
flex-start
flex-end
center
baseline
stretch
弹性子元素在侧轴上的对齐方式，与align-item相同

实例

.menu{    list-style-type: none;    padding: 0;    margin: 0;    display: flex;    flex-flow: row wrap;/*不换行*/}.menu li{    height: 40px;    text-align: center;    line-height: 40px;    flex:1 1 100%;/*收缩比例1，扩展比例1，最初宽度100%*/}.menu li:nth-child(1){    background-color: yellow;}.menu li:nth-child(2){    background-color:darkcyan;}.menu li:nth-child(3){    background-color: goldenrod;}.menu li:nth-child(4){    background-color: orchid;}.menu li:nth-child(5){    background-color: paleturquoise;}.menu li:nth-child(6){     background-color:pink; }.menu li a{    color: white;    text-decoration: none;}

@media (min-width: 480px) {    .menu li{        flex:1 1 50%;    }}

@media (min-width: 768px) {    .menu {        flex-flow: row nowrap;/*主轴方向水平，不换行*/    }}