移动端布局（更新中）

一、flex 弹性布局

(一）使用 flex 布局

 注：使用 flex 后，子元素的 float、clear、vertical-align属性都会失效

flex 布局的元素，为 flex 容器，它的所有子元素自动成为容器成员，为 flex 项目。

容器和项目分别拥有各自的属性

给 flex 容器添加 display： flex 属性

容器默认存在两根轴，沿主轴起始排列水平的主轴和垂直的交叉轴

（二）flex 容器的属性

1， flex-direction 属性，决定主轴方向（即项目排列方向）

    属性值：row （默认）主轴水平，左端为起点

                  row-reverse，主轴水平，右端为起点

                  column，主轴垂直，上方为起点

                  column-reverse，主轴垂直，下方为起点

2， flex-wrap 属性，默认情况为项目都排列在一条线上，此属性是换行

   属性值：nowrap  (默认) 不换行

                  wrap，换行

                  wrap-reverse，换第一行在下方

3，justify-content 属性，项目在主轴上对齐方式

   属性值： flex-start  （默认），左对齐

                   flex-end，右对齐

                   center，居中

                   space-between，两端对齐，项目之间间隔都相等

                   space-around，项目两侧间隔相等，所以项目之间的间隔比项目与边框大一倍

                   space-evenly，项目间距都相等

4，align-items 属性，项目在交叉轴对齐

   属性值：  flex-start ，交叉轴起点

                   flex-end，交叉轴终点

                   center，居中

                   baseline，项目第一行文字的基线对齐

                   stretch，（默认）如果项目未设置高度或设为auto，将占满整个容器的高度

（三）flex 项目的属性

1，order

  项目排列顺序，值越小排位约前

2， flex-grow

  项目的放大比例，默认为0，若属性值都为1，如果有剩余空间，将等分；若有一个属性值为2，      其他为1，前者比其他项目多占一倍。

3， flex-shrink

  项目的缩小比例，默认为1，若值都为1，空间不足，等比缩小；若一个为0，其余为1，前者不缩

4， align-self

  允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表继承父    元素align-items

  属性值：除auto，其余均与align-items 属性完全一致