弹性盒模型flexible

弹性盒模型/伸缩盒模型/怪异盒模型

1.控制元素分布方式（横着 竖着）

2.控制元素的对齐方式（居左，居中，居右，分散）

3.控制元素视觉顺序（元素出生顺序，后出生的元素显示在前面）

开启弹性盒模型的设置：

容器：开启flex布局  display：flex

弹性盒（伸缩盒）

项目：弹性盒的直接子元素--自动块状化

块元素居中（弹性盒）

1.父元素设置：display：flex; justify-content:center; align-items:center;

2.父元素：display：flex

  子元素:margin: 0 auto

调整主轴方向：flex-direction:row  从左到右

                         flex-direction:row-reverse 从右到左

                         flex-direction:column 从上到下

                         flex-direction:column-reverse 从下到上

调整对齐方式：justify-content：flex-start

                         justify-content：flex-end

                         justify-content：center

                         justify-content：space-around

                         justify-content：space-between

                         justify-content：space-evenly

主轴元素的换行:flex-wrap:wrap

交叉轴对齐方式：align-items:center