弹性盒模型 display:flex;

在弹性盒模型中float、clear、vertical-align不生效

1.作用

主要用于移动端布局 对一个容器中的子元素进行排列，对齐和分配空白空间

2.父元素上的属性

1. 开启弹性盒模型

    display:flex;

子元素默认水平排列

2. 设置弹性盒的方向

   flex-direction:;
   row:默认值  子元素水平排列
   column：子元素垂直排列
   row-reverse:子元素水平方向倒序排列
   column-reverse：子元素垂直方向上倒序排列

3. 设置子元素在主轴的对齐方式

默认，x轴为主轴，y轴为侧轴
当flex-direction:column;，y轴为主轴，x轴为侧周

    justify-content:;
    flex-start:默认值  弹性盒的开始
    flex-end：弹性盒的结束
    center：居中
    space-between：子元素之间平均分配父元素剩余的距离
    space-around:子元素分配父元素剩余的距离，两端是中间的一半

4. 设置子元素在侧轴的对齐方式

    align-items:;
    flex-start:默认值  弹性盒的开始
    flex-end：弹性盒的结束
    center：居中

3.子元素上的属性

flex-grow:number;
设置子元素宽度之间的比例（分配父元素剩下的距离）

大杂烩

子元素自动换行

flex-wrap:wrap