今天正好复习到flex布局，由于flex弹性盒布局在我们前端开发中尤为重要所以拿出来单独总结一下，顺便讲一下常见的几种居中方式

一、flex布局的特点

flex布局即为弹性布局，可以使元素具有伸缩性，根据父容器的大小，来决定收缩还是扩展。设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
来对比一下，有和没有flex布局的区别

  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    .flexBox {
      /* display: flex; */
      width: 200px;
      height: 200px;
      margin: 10px;
      background-color: aqua;
    }

    .item {
      height: 100px;
      width: 100px;
      border: 1px solid black;
      background-color: rgb(116, 226, 42);
    }
  </style>
  <div class="flexBox">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>

这是没加flex布局时的子元素排列情况↓

很显然，子盒子都为块级元素被排在不同行上，如果想要让他们排在一行，用以往的方式是使用float让他们浮动起来↓

.item {
      float: left;//添加浮动
      height: 100px;
      width: 100px;
      border: 1px solid black;
      background-color: rgb(116, 226, 42);
    }

不过由于父盒子的宽度限制，不能全部排满。接下来我们就来试试flex布局↓

   .flexBox {
      display: flex;//给父容器添加flex盒子模型
      width: 200px;
      height: 200px;
      margin: 10px;
      background-color: aqua;
    }

现在是不是都排在一行了，不过由于是弹性布局，强制排在一行下，那肯定是要收缩了，如果设置可以换行排列呢？

  .flexBox {
      display: flex;
      flex-wrap: wrap;//允许换行排列
      width: 200px;
      height: 200px;
      margin: 10px;
      background-color: aqua;
    }

是不是发现和float一样的效果，不过要是用float让他们都排在一行上那是不是很麻烦呢。可见flex可以给我们更多的布局方式。接下来让我们学习一下flex吧！

二、flex父容器属性

display: flex设置为flex盒子模型，在父容器下设置这个，此时在父容器下的所有元素都具有弹性，也就是可以伸缩了。

从这张图可以看出子盒子的实际总宽度之和为300px，而父盒子只有200px，况且flex盒子模型默认是不会换行排列的，所以子元素就都收缩了。

flex-direction: row此属性设置flex布局中主轴方向(子元素的排列方向)，默认row即从左到右，还有row-reverse从右到左，column从上到下，column-reverse从下到上,说起flex布局中有2个轴，元素就是依靠这2个轴进行对齐，一个是主轴，也就是子元素的排列方向，默认row即为水平轴。

默认从左到右排序。现在把主轴方向改为row-reverse即为水平从右到左排列↓

现在子元素调了一个头开始排序。接下来使用column试试↓

先不管它收缩，现在看了主轴变为了从上到下的方向。同理column-reverse也一样↓

记住咯，flex-direction设置的是flex布局中子元素的主轴方向，也就是那4个：左右，右左，上下，下上。这些都是影响子元素的开始排列方向，还有一点先说下，侧轴(副轴)是永远垂直于主轴的。

flex-wrap: nowrap这个属性上面也接触过了，也就是设置flex布局中子元素的换行情况，默认nowrap是不换行如果空间够好说，空间不够就要挤压元素了。可选值为：nowrap不换行，wrap可换行，wrap-reverse换行且反转。先试试wrap于nowrap区别↓

可见是不是很容易区分。在看看wrap-reverse是怎么回事↓

？是不是超出预料了呢，没错wrap-reverse就是新行的位置变了，变成了上面，一般我们写字，新行都在下面，而这个反转，就把新行写在了上方。

flex-flow: row nowrap这是一个复合属性，也就是把flex-direction和flex-wrap合并在一个属性上。这个属性可以同时设置flex的主轴方向和换行方式。也可以分开单独设置。
justify-content: flex-start这是属性设置的是主轴的对齐方式，之前没有设置对齐方式就是一个挨着一个排列，看图最容易明白。

这种对齐方式差不多就这些了。这种都是在主轴为水平轴的情况下，如果把主轴设置为垂直轴呢？

也是一样，只是把轴立起来，然后再对齐，其他都差不多，这里就不一一试了

align-items:stretch此属性设置flex布局下单行时的侧轴对齐情况。

align-content:stretch设置flex布局中多行时的侧轴对齐情况，把每一行看作一个元素进行对齐，与justify-content类似。

这个布局与justify-content类似，只是把每行看作元素进行布局，而且只适用于多行情况下，单行就用align-items。

三、flex子元素属性

flex:0 1 auto这是一个复合属性，可以同时设置flex-grow、flex-shrink、flex-basis，分别为子元素扩展比例、收缩比例、基础比例。接下来依次讲解
flex-grow:0设置子元素的扩展比例默认0，不允许负值。说白了就是当设置了扩展比例之后，如果父元素还有剩余空间，则这部分空间由所有设置扩展比例的子元素按比例分配。

没设置扩展比例之前各子元素不会分配剩余空间。接下来我设置每个元素flex-grow:1看看效果

让我来解释一下，这是如何计算的：刚开始没设置flex-grow时，默认是0，即元素不分配父元素剩余空间，所以每个元素就占有自己宽度的空间。后来设置flow-grow:1后，每个元素都有了扩展属性，一开始父元素剩余400-100-100=200的空间，这部分空间由具有扩展属性的子元素按扩展比例分配：每个元素获得：(400-100-100)*(1/(1+1))=100的额外空间，所以现在每个元素有200的宽度。接下来我分别设置元素1的flow-grow：1,元素2的flow-grow：3看看效果

现在看出来了吗？元素1获得额外空间：(400-100-100)*(1/(1+3))=50,总宽度100+50=150，元素2获得额外宽度：(400-100-100)*(3/(1+3))=150，总宽度=100+150=250。总结一句话，如果父元素有剩余空间，则子元素依据设置的扩展比例分配这些额外的空间。

flew-shrink:1设置子元素的收缩比例，默认为1，不允许负。现在知道为什么，空间不足的时候子元素会默认收缩吗，因为有默认收缩比例，而扩展比例默认为0即不分配额外空间。

起始情况，各元素默认200的宽度，父元素默认400的宽度刚好塞满。现在把父元素宽度缩小到300看看效果。

可以看出子元素按照默认收缩比例同等收缩了，看看是如果计算的吧：原本子元素总宽度为：200+200=400，父元素300,超出100。此时父元素放不下了，要收缩子元素，每个子元素各收缩：((200*1)/(200*1+200*1))*100=50。不难看出如何计算的，可以这么说：先求出子元素的所有宽度与收缩比例总和，再计算每个元素占所有子元素加权宽度和的比例，然后通过这个比例计算出应该分摊收缩多少宽度。接下来设置元素1的flex-shrink:1，元素2的flex-shrink:3看看效果

元素1收缩：((200*1)/(200*1+200*3))*100=25,收缩后：200-25=175，元素2收缩：((200*3)/(200*1+200*3))*100=75，总宽度：200-75=125

flex-basis:auto设置元素的基准伸缩比例，默认auto情况下，元素的宽度由width或者内容决定。如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间。

当基准值之和大于父元素的宽度时，按照基准值的比例收缩元素，元素1基准值200，宽度200，元素2基准值300，宽度200，父元素宽度400，所以子元素根据基准值的比例收缩。

align-self:auto设置子元素自身的侧轴对齐方式，此属性可以单独设置每个子元素在侧轴上的对齐。

没什么难的吧，就是单独设置每个元素侧轴对齐

order:0设置每个元素的排列顺序，数值越小排在越前面，也就是按照给定优先级排列元素。

四、常用的几种居中方式

margin:0 auto+text-align:center这个设置前提是父元素要有宽高，只设置元素的水平居中以及此元素的子元素水平居中。
如果想让子元素内的字水平垂直居中，则只需要在子元素设置line-height:子元素高度

父元素设置display:flex+justify-content:center子元素自动水平居中，如果要垂直也居中则还要设置align-items:center或者align-content:center此时子元素都水平垂直居中
如果单独设置元素垂直居中可以给子元素设置align-self:center，垂直轴为主轴时也是一样。
父元素给个定位属性和高宽，子元素设置position:absolute+left:50%+top:50%+transform:translate(-50%,-50%)，transform属性可以换成margin-left:-(子元素宽度一半)和margin-top:-(子元素高度一半)这样就能水平垂直居中了

父元素有定位和高宽，子元素设置position:absolute+margin:auto+top:0+left:0+right:0+bottom:0，这样也能实现水平垂直居中了，过有些繁琐就是了