开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

前言

有一道经典面试题——怎样实现元素垂直水平居中？这时候我们就可以用flex容器来搞定，除了垂直水平居中，元素自适应，元素排列都可以用它来完成。这是一个非常实用的CSS属性，掌握它必不可少，今天就能熟悉一下flex容器属性。

Flex容器

display属性可以指定元素的类型，如block(块级)、inline-block(行内块)等。flex是其中的一个属性值，它被称为弹性布局，任何一个元素都能设置成flex,此时该元素的子元素被称为“项目”,我们能够利用属性对这些项目进行操作，实现垂直居中等。容器内我们可以看成有两个轴——主轴与交叉轴，可以当成横轴与纵轴，默认横轴为主轴，每条轴上有三个位置start、center、end可以当作项目的对齐方式。下图可以简单认识下默认flex容器

兼容

flex属性需要兼容，尤其是IE低版本就不建议使用该属性啦。

     .flex {
        display: flex; /*chrome*/
        display: -moz-box; /*firefox*/
        display: -ms-flexbox; /*IE*/
        display: -webkit-flex; /* Safari */
      }

容器属性

flex-direction

flex-direction——决定主轴的方向，正如我们上面所说默认主轴为横轴也就是水平方向，start在左边。

row:默认值。
column:把纵轴当成主轴，元素会在垂直轴上排列，start在上边。
row-reverse:水平方向，start到右边。
column-reverse:垂直方向，start在下边。

flex-wrap

看到wrap就能知道是用来控制换行。

nowrap:默认不换行。
wrap:换行。
wrap-reverse：换行，但是第二行是在第一行的上面。

flex-flow

flex-flow是前两个属性的简写，第一个值是flex-direction，第二个值是flex-wrap。

    .flex {
        display: flex; 
        width: 400px;
        height: 400px;
        background: orange;
        flex-flow: row nowrap;
      }
      .item {
        width: 100px;
        height: 100px;
        background: red;
      }

   <div class="flex">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>

justify-content

justify-content——决定项目在主轴的对齐方式。

flex-start:在主轴开始位置对齐，默认值。
flex-end:在主轴结束位置对齐。
center:在主轴中心。
space-between:在主轴两端对齐。让项目之间的间隔都一样，第一个跟最后一个分别在开始、结束。
space-around:让项目两侧之间间隔都一样。

space-between跟space-around非常好用，但也要清楚两者之间的区别，space-around跟主轴开始、结束都有距离。

align-items

align-items——决定项目在垂直轴的对齐方式。前三个属性值跟justify-content是一样的

stretch:默认值，当项目没有heigth时，会填满容器的高度。
flex-start:在开始位置对齐。
flex-end:在结束位置对齐。
center:在中心。
baseline:让项目中第一行文字对齐。这个还是很有意思的。

    .flex {
        display: flex;
        width: 400px;
        height: 400px;
        background: orange;
        align-items: baseline;
      }
      .item1 {
        width: 100px;
        height: 80px;
        margin-top: 50px;
        background: red;
      }
      .item2 {
        width: 100px;
        height: 120px;
        background: red;
      }

垂直水平居中

学完justify-content,align-items我们就可以轻松实现水平居中。将两者属性值同时设为center即可。

   .flex {
        display: flex;
        width: 400px;
        height: 400px;
        background: orange;
        justify-content: center;
        align-items: center;
      }
      .item {
        width: 100px;
        height: 100px;
        background: red;
      }

align-content

align-content——决定多轴对齐方式，如果有几行元素，那么我们就可以用这个属性。它的属性值跟align-items是一样的，只不过把一个项目变成一行项目，这里我们就不再赘述。当只有一个轴的项目时，该属性不管用。

项目属性

对应flex容器中的项目，也有着相关属性，这里我们就讲解一下最重要的4个属性。

flex-grow

flex-grow——多余空间时，决定项目比例。可以设置项目在轴线所占比例。默认值为0，也就是说每个元素都占用本身的空间。如果轴线上的项目都设置为1，那么项目会评分轴线上的空间。

flex-shrink

flex-shrink——空间不够时，决定项目比例。跟flex-grow这正好相反。默认值为1，如果一个项目设置了该属性，那么会优先满足其他项目在轴线上的空间。

flex-basis

flex-basis——决定该项目占据轴线的最小空间。默认值为auto，项目本身所占据的空间。

flex

flex——上面三个属性的简写方式，我们可以记一下常用简写。

flex:1;在chrome就是flex:1,0,0%。这个有兼容问题在IE中不要简写。
flex:0;在chrome就是flex:0.0.0%

了解上面项目属性后，我们也可非常容易实现元素的自适应。

      .item1 {
        width: 150px;
        height: 80px;
        background: red;
      }
      .item2 {
        height: 80px;
        background: greenyellow;
        flex: 1;
      }

QQ图片20221123212737.png

总结

以上就是flex属性，对于日常开发中我们写一些自适应的布局非常的有用。常用的属性如jstify-content,align-items最好能够手写出来。

CSS详解——Flex容器

前言