CSS—flex布局、经常使用水平垂直居中

时间 2020-04-25

标签 css flex 布局经常使用水平垂直居中栏目 CSS 繁體版

原文原文链接

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

1、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布局时的子元素排列状况↓bash

很显然，子盒子都为块级元素被排在不一样行上，若是想要让他们排在一行，用以往的方式是使用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吧！

2、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。

3、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设置每一个元素的排列顺序，数值越小排在越前面，也就是按照给定优先级排列元素。

4、经常使用的几种居中方式

margin:0 auto+text-align:center这个设置前提是父元素要有宽高，只设置元素的水平居中以及此元素的子元素水平居中。

若是想让子元素内的字水平垂直居中，则只须要在子元素设置line-height:子元素高度

父元素设置display:flex+justify-content:center子元素自动水平居中，若是要垂直也居中则还要设置align-items:center或者align-content:center此时子元素都水平垂直居中 flex

若是单独设置元素垂直居中能够给子元素设置align-self:center，垂直轴为主轴时也是同样。
父元素给个定位属性和高宽，子元素设置position:absolute+left:50%+top:50%+transform:translate(-50%,-50%)，transform属性能够换成margin-left:-(子元素宽度一半)和margin-top:-(子元素高度一半)这样就能水平垂直居中了ui

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