flex弹性盒

一、弹性盒是什么

由

容器（父元素）

项目（子元素）

组成的

二、如果要写弹性盒

父元素{

display:flex;

}

决定主轴的方向（即项目的排列方向），常用的值：

> row（默认值）：主轴为水平方向，起点在左端

> row-reverse：主轴为水平方向，起点在右端

> column：主轴为垂直方向，起点在上沿

> column-reverse：主轴为垂直方向，起点在下沿

默认情况下，项目都排在一行，是不换行的，如果排不下了，如何换行

> nowarp（默认）：不换行

> warp：换行，第一行在上方

> wrap-reverse：换行，第一行在下方

可以说是direction和warp的集合

flex-flow: row warp;

同时设定flex-direction:row 和 flex-wrap: warp

子元素水平排列方式

.box{
    justify-content: flex-start  | flex-end | center | space-between | space-around
}

子元素垂直排列方式

.box{
    align-content: flex-start(靠上)  | flex-end(靠下) | center(居中) | baseline | stretch(拉伸)
}

定义项目的放大比例，默认是0，不放大，数值为项目在父元素所占的份数

定义项目的缩小比例，与flex-grow相反，默认值是1

定义在分配多余空间之前，项目项目占据的主轴空间

flex是flex-grow,flex-shrink和flex-basis的简写，默认值是 0 1 auto ，后两个属性可选