移动端--flex布局

首先flex布局，有很多其他名字，比如：伸缩布局、弹性布局、伸缩盒布局、弹性盒布局。

这是一种极其灵活的布局方式，but PC端浏览器支持情况较差，尤其是IE678，有些甚至压根不支持，所以它在移动端应用相当广泛。

———————————————————————————————————————————

1.布局原理

一句话：通过给父盒子添加flex属性

display：flex；

，来控制子盒子的排列方式与位置。（任何一个容器都可以指定flex布局，无论是行内元素还是块级元素）

ps：当为父元素设置为flex后，子元素的float，clear，vertical-align将失效。（很好理解，因为flex布局可以做很多事，可以直接让块级元素一行显示，也可以让子元素居中显示，所以也就不需要浮动和清除浮动这些了）

———————————————————————————————————————————

2.flex布局父项常见属性：

1）设置主轴方向

<!--  flex-direction：设置主轴方向  -->
flex-direction：row              //主轴为行，从左到右（默认值）
flex-direction：row-reverse      //主轴为行，从右到左
flex-direction：column           //主轴为列，从上到下
flex-direction：column-reverse   //主轴为列，从下到上

  flex布局中子元素是根据主轴方向排列的，主轴和侧轴是会变化的，flex-direction设置谁为主轴，剩下的就是侧轴。默认情况下，主轴是水平向右，测轴是垂直向下如下图所示：

 2）设置主轴上子元素的排列方式

<!--  justify-content：设置主轴上子元素的排列方式  -->
justify-content：flex-start     //从头部开始，从左到右（默认）
justify-content：flex-end       //从尾部开始排列（贴着右边，前提是主轴默认）
justify-content：center         //在主轴上居中对齐
justify-content：space-around   //平分剩余空间
justify-content：space-between  //先两边贴边，再平分剩余空间（重要）

ps：在设置这个属性之前，一定要确定好主轴方向。

最后一个效果十分重要，从这里其效果如下图所示：

  3）设置盒子是否换行

 在flex布局中，默认子元素是不换行的，如果父盒子装不开的情况下，就会缩小子元素的宽度，硬塞到父盒子里，强行一行显示。

<!--  flex-wrap：设置子元素是否被换行  -->
flex-wrap：nowrap;    //不换行（默认值）
flex-wrap：wrap;      //换行

  4）设置侧轴上子元素的排序方式（单行情况）

ps：这个align-items在子项为单项时候使用，也就是单行的时候使用。如果是多行的话，采用下方5）的内容。

<!--  align-items：设置侧轴上子元素的排列方式（以默认的侧轴y为例）  -->
align-items：flex-start     //从上到下
align-items：flex-end       //从下到上
align-items：center         //居中
align-items：stretch        //拉伸（默认值）

 这个拉伸需要注意，如果在子盒子不给高度的情况下，就会默认拉伸到和父盒子一样高/宽。

   5）设置侧轴上子元素的排序方式（多行情况）

 此方法适用于父盒子内部有多行盒子的情况，在单行是没有效果的。

<!--  align-content：设置侧轴上子元素的排列方式（多行）  -->
align-content：flex-start     //在侧轴头部开始排列
align-content：flex-end       //在侧轴尾部开始排列
align-content：center         //在侧轴中间显示
align-content：stretch        //设置子元素高度平分父元素高度
align-content：space-around   //子元素在侧轴平分剩余空间
align-content：space-between  //子元素先贴在侧轴两头，再将剩余空间平分

 直接看可能比较难懂，可以自己建一个父盒子里面套几个小盒子，写一写样式，感受一下就很清楚了。

6)设置主轴方向与是否换行的复合写法

<!-- flex-flow是flex-direction和flex-wrap的合并写法  -->

flex-flow:coplumn wrap;

 ——————————————————————————————————————————

3.flex布局子项常见属性：

1）flex属性定义子项目分配剩余空间

 数字number为占多少份数（可以写百分比哈）

flex：<number>;   //默认是0

 此方法可用于实现圣杯布局，非常简单方便，如下大盒子里准备三个小盒子：

<section>
    <div></div>
    <div></div>
    <div></div>
</section>

 再写一下样式,首先一定不要忘了给父元素添加flex属性，然后给左右盒子宽度，最后只需要给中间的盒子写一句：flex：1；即可，意味第二个子盒子独占剩余空间的一份，具体样式如下：

section {
    display: flex;
    width: 60%;
    height: 150px;
    background-color: pink;
    margin: 0 auto;
}

section div:nth-child(1) {
    width: 100px;
    height: 150px;
    background-color: rgb(209, 122, 122);
}

section div:nth-child(2) {
    flex: 1;
    background-color: rgb(115, 183, 115);
}

section div:nth-child(3) {
    width: 100px;
    height: 150px;
    background-color: rgb(110, 110, 173);
}

最后效果如下，可随着浏览器可视区域的大小自适应变大变小。

 2）控制子项自己在侧轴上的排列方式

 注意与align-items区分，如果有三个盒子，你加完align-items：flex-end；会让三个盒子全部移到下面，而如果我们只想让其中的一个盒子移到下面，则需要用到下面这个属性：

align-self：flex-end；

只给这一个盒子添加，就让这一个盒子落下来，里面的属性值和align-items的属性值选项一样，根据需求选择即可。

 3）定义项目的排列顺序

 通过order属性设置，数值越小，越靠前，默认值为0；（要注意，与z-index不一样）

order：-1；

还是假设你有三个盒子，从左到右，分别1、2、3.此时你想让2号盒子排到一号盒子的前面，只需要让order设置为-1即可，因为1号盒子默认是0，只要让2号盒子的order小于0就可以了。

———————————————————————————————————————————

总结：

虽然刚开始学习flex布局，可能会有点乱，因为单词有点多还不那么好记，那么最好的学习方法就是实践，多练习总会记住的。