弹性布局(小白详细说明)

flex弹性布局（详细说明）

flex-direction属性决定了容器的方向。

四个值分别为：row(默认值)从左向右、row-reverse从右向左、column从上到下、column-reverse从下到上。

flex-wrap属性

flex-wrap属性之后将自动将排列不下的内容进行换行。 nowrap(默认值)不换行、wrap向下换行、wrap-reverse向上换行。

flex-flow属性

flex-flow属性是 flex-direction属性flex-wrap属性两种属性的简写形式，默认值是row nowrap。

justify-content属性定义了在容器方向上的对齐方式。

flex-start(默认值)：向左对齐。

　　flex-end：向右对齐。

　　center： 居中对齐。

　　space-between：两端对齐，每一个子元素等距离间隔，子元素与容器边框无间隔。

　　space-around：每个子元素两侧的间隔相等。子元素之间的间隔比子元素与容器边框的间隔大一倍。

align-items属性 定义在垂直容器方向上的对齐方式。

flex-start：垂直方向的起点对齐。

　　flex-end：垂直方向的终点对齐。

　　center：垂直方向的中点对齐。

　　baseline: 与第一个子元素中文字的基线对齐。

　　stretch(默认值)：如果子元素没有设置高度或者高度设为auto，那么它将占满整个容器的高度。

align-content属性 定义了子元素两种方向上的对齐方式。

flex-start：当容器方向子元素刚好填满时，与垂直方向的起点对齐。

　　flex-end：当容器方向子元素刚好填满时，与垂直方向的终点对齐。

　　center：当容器方向子元素刚好填满时，与垂直方向的中点对齐。

　　space-between：当容器方向子元素刚好填满时，垂直方向两端对齐，子元素之间的等距离间隔。

　　space-around：两个方向两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

　　stretch（默认值）：占满整个垂直方向。

order属性定义了子元素的排列顺序，数值小的在前。

flex-grow属性定义了子元素的放大比例，默认值为0。

flex-shrink属性定义了子元素的缩小比例，默认值为1。

flex-basis属性定义了给子元素分配空间时其占据的空间为多少，可以设置为与其width和height属性一样的值，那么它将被分配固定的空间大小。

flex属性为flex-grow, flex-shrink 和 flex-basis的简写。