弹性盒子

flex 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式

父容器设置：display: flex

子元素在父容器中的排列方向：flex-direction

row ： 左对齐

row-reverse ： 右对齐

column： 从上到下

column-reverse： 从下到上

initial： 左对齐

子元素在父容器换行：flex-wrap

nowrap： 不换行

wrap： 换行

wrap-reverse： 反向换行

子元素在父容器以X轴（横轴）的对齐方式：justify-content

initial： 左对齐

flex-start： 左对齐

flex-end： 右对齐

center： 居中对齐

space-between： 两端对齐，子元素中间留白

space-around： 两端对齐，子元素两边留白

子元素在父容器在Y轴（纵轴）上：align-items

stretch： 父容器高度

initial： 父容器高度

center： 居中对齐

flex-start： Y轴上对齐

flex-end： Y轴下对齐

baseline 子元素中有文字，则按文字底部对齐，没有就跟flex-start一样

子元素在父容器以X轴（横轴）的对齐方式：align-content

stretch 两端对齐

initial 两端对齐

center 居中对齐

flex-start 上对齐

flex-end 下对齐

space-between 两端对齐

space-around 两端对齐，上下留白

将元素按比例放大：flex-grow

子元素宽：flex-basis