CSS3弹性盒子flex详述

下边简单说明下各个属性的意义，重点梳理flex:1是什么意思。

1：dispaly: flex 定义容器为弹性容器

2：flex-direction 定义弹性容器的主轴是X轴还是Y轴，子元素在该主轴上如何排列，顺序排列还是反转排列。

3：justify-content 定义弹性容器中子元素在主轴上如何对齐。

4：align-items 定义弹性容器中子元素在侧轴上如何对齐。

5：flex-wrap 定义弹性容器中子元素是否要换行，具体的换行方式。默认子元素在弹性容器中以单一一行呈现，即不换行。

6：align-content 定义弹性容器中子元素在换行后每一行在侧轴上的对齐方式。

以下是作用在子元素上的属性

7：order 定义子元素单个元素的在主轴上的出现顺序。

8：align-self 定义子元素在侧轴上的对齐方式

9：flex

flex是flex-grow、flex-shrink、flex-basis三个属性的缩写

● flex-grow 定义当所有子元素的宽度和小于弹性容器自身宽度时的扩大比例。

● flex-shrink 定义当所有子元素的宽度和大于弹性容器自身宽度时的缩小比列。

● flex-basis 定义子元素的自身基准值，优先级高于子元素自身的宽度。

flex的值有以下几种

● auto: 计算值为 1 1 auto

● initial: 计算值为 0 1 auto

● none：计算值为 0 0 auto

● inherit：从父元素继承

当flex:1时表示flex-grow: 1、flex-shrink:1、flex-basis: 1