弹性盒子之详情

一:弹性容器的属性

1:flex-direction 2:flex-wrap

3:flex-flow 4:justify-content

5:align-items 6:align-content

1:flex-direction: ; 指定容器中弹性元素的排列方式

可选值：

row 默认值，弹性元素在容器中水平排列（左向右）----主轴-自左向右

row-reverse 弹性元素在容器中反向水平排列（右向左）----主轴-自右向左

column 弹性元素纵向排列（自上向下）---- 主轴-自上向下

column-reverse 弹性元素纵向排列（自下向上）----主轴-自下向上

2: flex-wrap: ;设置弹性元素是否在弹性容器中是否自动换行

可选值：

nowrap 默认值，元素不会自动换行

wrap 元素沿着辅轴方向自动换行

wrap-reverse 元素沿着辅轴反方向换行

3:flex-flow:wrap和direction的简写属性，且没有顺序要求

默认值 row

换行nowrap

4:justify-content 如何分配主轴上的空白空间（主轴上的元素如何排列）

可选值：

flex-start 元素沿着主轴起边排列

flex-end 元素沿着主轴终边排列

center 元素居中排列

space-around 空白分布到元素的两侧

space-between 空白均匀分布到元素间

space-evenly 空白分布到元素的单侧（兼容性差一些）

5: align-items 在辅轴上如何对齐-元素间的关系

可选值：

stretch 默认值，将同一行元素的长度设置为相同的值

flex-start 元素不会拉伸， 沿着辅轴起边对齐

flex-end 元素不会拉伸， 沿着辅轴终边对齐

center 居中对齐

baseline 基线对齐（用的不对）

6: align-content: ;辅轴空白空间的分布

可选值：

flex-start 元素沿着辅轴起边排列

flex-end 元素沿着辅轴终边排列

center 元素居中排列

space-around 空白分布到元素的两侧

space-between 空白均匀分布到元素间

space-evenly 空白分布到元素的单侧（兼容性差一些）

需求：在弹性盒子里，元素时间正中间居中对齐

justify-content: center;

align-items: center;