Flex布局解析(超级详细)

1. flex概念介绍

2. flex-direction 设置主轴

3. flex-wrap设置换行

4. flex-flow 语法糖

5. justify-content设置主轴方向

6. align-items设置交叉轴（单根轴）

7. align-content设置交叉轴（多根轴）

8. order 排序

9. flex-grow 放大

10. flex-shrink缩小

11. flex-basis

12. flex 语法糖

13. align-self

flex

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。

如果需要在一个盒子内进行flex弹性布局的话，需要给这个盒子添加display：flex或者 display: inline-flex属性，此处只介绍display：flex

flex-direction

flex-direction （direction释义：方向）

没错，direction就是用来控制方向的要了解direction的属性就需要先清楚在flex中方向的定义

看如下这张图

没错是一个空的盒子，从左到右（水平方向），我们将他称之为X轴，从上到下（垂直方向），称之为y轴。（先这么叫着哈）

上图的代码如下

<body>
    <div class="big_box">
    
    </div>
</body>

<style>
        .big_box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 20px auto;
            display: flex;
        }
    </style>
复制代码

direction有四个常见的属性

flex-direction：row; (默认值)
flex-direction：row-reverse;
flex-direction：column;
flex-direction：column-reverse;

先说一下 row 和 column

row ：（释义：行）表示X轴从左到右（默认值）

column：（释义：列）表示y轴，从上到下

当我们需要为盒子的子元素设置布局的方向，我们将所选择的方向称之为主轴，另外一条方向我们将他称之为交叉轴

flex-direction：row当我们设置从左到右作为我们的布局方向的时候，这个时候x轴我们将他称之为主轴，y轴就称之为交叉轴了
flex-direction:column当我们从上到下作为我们的布局方向的时候，此时的y轴就被我们称之为主轴，x轴就是交叉轴了

reverse（释义：反向）聪明的你一定猜到了row-reverse和column-reverse是什么意思了吧，没错row-reverse是水平轴方向从右到左，而column-reverse就是垂直轴从下到上，相信聪明的你看完一定能够举一反三了吧

看代码

设置x轴作为我们的主轴flex-direction: row;

<body>
    <div class="big_box">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
    
    <style>
        .big_box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 20px auto;
            display: flex;
            flex-direction: row;
        }
        .box{
            width: 80px;
            height: 80px;
            background-color: orange;
        }
    </style>
</body>

复制代码

【注，后续的代码div标签和body标签将不再书写，可以根据图片得出增删的div数量】

------------------------------------------------------------------------------------------------------------

设置y轴（垂直方向）作为我们的主轴flex-direction: column;

<style>
        .big_box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 20px auto;
            display: flex;
            flex-direction: column;
        }
        .box{
            width: 80px;
            height: 80px;
            background-color: orange;
        }
    </style>
复制代码

------------------------------------------------------------------------------------------------------------

flex-direction:row-reverse

------------------------------------------------------------------------------------------------------------

flex-direction:column-reverse

flex-direction布局到此结束

------------------------------------------------------------------------------------------------------------

flex-wrap

wrap有众多的释义，其中的一种释义就是换行，所以flex-wrap就是使盒子容器内的元素进行换行的，弹性布局的意义就是空间不够，咱往里缩一缩，空间足够，咱膨胀一点，站开一点。

flex-wrap的三个常见属性：

flex-wrap：nowrap（默认值）
flex-wrap：wrap
flex-wrap：wrap-reverse

flex-wrap：nowrap这个表示空间不够的时候都不进行换行，继续在一行向内进行压缩。

举个栗子

<style>
        .big_box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 20px auto;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
        }
        .box{
            width: 80px;
            height: 80px;
            background-color: orange;
        }
    </style>
复制代码

10个宽度为80px的子元素盒子在宽度为500px的大盒子内正好挤满，但是他们的长度却与实际80px的长度不一样

如图，弹性布局在不换行的时候，会本着空间不够，咱就往里面缩一缩，自动将自己的宽度改成了50px

当我们设置换行之后，他会以自己本身的宽度和高度进行布局，空间不够继续换行

举个栗子

flex-wrap：wrap

而flex-wrap：wrap-reverse表示的是换行子元素进行反转，调换空间

看图

flex-wrap：wrap-reverse

flex-wrap布局介绍到此结束

------------------------------------------------------------------------------------------------------------

flex-flow

flow的释义有流动，引发，来自等释义

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

flex-flow: <flex-direction>  <flex-wrap>;  //两个参数中间是空格

//默认值是
flex-flow：row nowrap ;
复制代码

我们来试一个简写

    <style>
        .big_box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 20px auto;
            display: flex;
            flex-flow: row wrap;
            
        }
        .box{
            width: 80px;
            height: 80px;
            background-color: orange;
        }
    </style>
复制代码

展示的效果是和flex-direction：row; flex-wrap:wrap;是一样的

flex-flow: row wrap;

flex-flow布局介绍到此结束

------------------------------------------------------------------------------------------------------------

justify-content

justify 释义：对齐
content 释义：内容

在介绍justify-content时先来了解一个图
看图

图中的main start（主轴开始--左侧）和main end （主轴结束--右侧），但是这个布局他是基于flex-direction：row的，当我们将flex-direction设置为flex-direction：row-reverse的时候，主轴开始方向就是在右侧，而主轴结束方向也变成左侧了

明白了这个原理。我们接着来看justify-content

justify-content 的意思就是将父盒子内的子元素进行对齐排列的值得注意得是justify-content排列的方向是和主轴息息相关的，也就是flex-direction设置了哪个轴为主轴，我们就会和那个轴的方向是一样的，他的起始位置和终止位置也是会遵循flex-direction的方向

justify-content的常见属性有

justify-content:flex-start （默认值）从主轴起始方向对齐【start释义：开始】
justify-content:flex-end 从主轴结束方向对齐【end释义：结束】
justify-content:center 居中对齐【center释义：居中】
justify-content:space-between 两端对齐，子元素之间的间隔相等【space-between释义：间距】
justify-content:space-around 子元素之间的间隔相等【space-aroundt释义：空间】

先来看 justify-content:flex-start
当flex-direction：row时。主轴从左到右为正向，子元素从左到右进行排列

   <style>
        .big_box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 20px auto;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
        }

        .box {
            width: 80px;
            height: 80px;
            background-color: orange;
        }
    </style>
复制代码

------------------------------------------------------------------------------------------------------------

当flex-direction：row-reverse时。主轴从右到左为正向，子元素从右到左进行排列

举栗
flex-direction: row-reverse;
justify-content: flex-start;

同理，将主轴设置为垂直方向也一样，相信聪明的你能想象出他的模样
------------------------------------------------------------------------------------------------------------ 再来看justify-content：flex-end
这个是右对齐，元素的顺序不变，整体靠右对齐，还是基于flex-direction的方向

flex-direction: row;
justify-content: flex-end;

------------------------------------------------------------------------------------------------------------ 主轴方向从右到左
flex-direction: row-reverse;
justify-content: flex-end;

主轴方向为垂直方向 (column) 的时候同理
------------------------------------------------------------------------------------------------------------

justify-content: center;center是将子元素进行居中显示，但是元素的排列方式还是需要根据flex-direction来进行决定

看图举栗\

flex-direction: row;
justify-content: center;

------------------------------------------------------------------------------------------------------------

flex-direction: row-reverse;
justify-content: center;

主轴方向为垂直方向 (column) 的时候同理,后续将不再强调主轴的方向，当我们看到justify-content的时候应该将他和主轴的方向（flex-direction）紧密联系到一起
------------------------------------------------------------------------------------------------------------

justify-content:space-between 两端对齐，子元素之间的间隔相等
justify-content:space-around 子元素之间的间隔相等

这两个概念是容易混淆的，这里跟着我的脚步，一定给您整得清清楚楚，明明白白

space-between

flex-direction: row;
justify-content: space-between;

space-between他的两侧是贴靠在主轴的两侧的，绿线的距离是相等的，也就是说不管多少子元素，先将主轴两侧分别贴靠一个子元素，剩余的元素进行空间的平均分配，空间如果不够，又不能换行的话，元素宽度减小，继续压缩。也许这就是弹性布局的魅力吧

------------------------------------------------------------------------------------------------------------

space-around

flex-direction: row;
justify-content: space-around;

space-around是不与主轴的两侧边框进行贴合的，会有一点间距，就是图中黑色线的距离，那么剩余的空间（粉色线之间的距离）会被剩余的子元素进行平均分配，遵循弹性布局规则。图中只剩余一个子元素，则占领全部空间，左右距离相等（红线距离）

继续看个栗子（有感觉没？？？）
1号盒子距离左侧的距离是12px，1号和2号盒子的距离是25px【2到3,3到4,4到5均是如此】，理论距离应该是24.6px，有兴趣的可以算一下，理解的更加透彻哦

------------------------------------------------------------------------------------------------------------

align-items 交叉轴对齐（单根轴线）

主轴介绍的也差不多了，接下来介绍下交叉轴。
啥是交叉轴？不是主轴的那个轴就是交叉轴，当我们主轴是水平方向的时候，那么交叉轴就是垂直方向。如果主轴是垂直方向，那么我们的交叉轴就是水平方向。
我们都知道justify-content是用来控制子元素的排列顺序是从主轴的起始位置排列还是结束位置开始排列的，既然主轴有，那咱交叉轴也得有啊，是不是？
所以交叉轴用来控制子元素排列顺序是从哪里开始的属性叫做 align-items（释义：对齐项目）

align-items 的常见属性有

align-items: flex-start 交叉轴的起点开始对齐
align-items: flex-end交叉轴的终点方向
align-items: center 交叉轴居中位置
align-items: baseline交叉轴子元素的第一行文字或者内容的基线对齐
align-items: stretch（默认）子元素拉伸（如果子元素未设置高度或设为auto，将占满整个容器的高度）

第一种情况

当主轴水平，方向自左向右时
主轴水平：flex-direction：row
交叉轴和主轴的交点在左上角
交叉轴的子元素排列顺序自上（flex-start）而下（flex-end）

    <style>
        .big_box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 20px auto;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
        }
        .box {
            width: 80px;
            height: 80px;
            background-color: orange;
        }
    </style>
复制代码

flex-direction: row;
align-items: flex-start;

flex-direction: row;
align-items: center;

flex-direction: row;
align-items: flex-end;

------------------------------------------------------------------------------------------------------------

第二种情况

当主轴水平，方向自右向左的时候
主轴水平：flex-direction：row-reverse
交叉轴和主轴的交点在右上角
交叉轴的子元素排列顺序自上而下

flex-direction: row-reverse;
align-items: flex-start;

flex-direction: row-reverse;
align-items: center;

flex-direction: row-reverse;
align-items: flex-end;

------------------------------------------------------------------------------------------------------------

第三种情况

当主轴垂直的时候，方向自上而下的时候
主轴垂直：flex-direction：column
交叉轴和主轴的交点在左上角
交叉轴的子元素排列顺序自左到右

flex-direction: column;
align-items: flex-start;

flex-direction: column;
align-items: center;

flex-direction: column;
align-items: flex-end;

------------------------------------------------------------------------------------------------------------

第四种情况

当主轴垂直的时候，方向自下而上的时候
主轴垂直：flex-direction：column-reverse
交叉轴和主轴的交点在左下角
交叉轴的子元素排列顺序自左到右

flex-direction: column-reverse;
align-items: flex-start;

flex-direction: column-reverse;
align-items: flex-center;

flex-direction: column-reverse;
align-items: flex-end;

------------------------------------------------------------------------------------------------------------

`align-items: baseline`交叉轴子元素的第一行文字或者内容的基线对齐

将第一个盒子的样式改一下，加上基线对齐align-items（只示范在flex-direction：row的情况）

<body>
    <style>
        .center {
            text-align: center;
            line-height: 80px;
        }
        .big_box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 130px auto;
            display: flex;
            flex-direction: row;
            align-items: baseline;
        }
        .box {
            width: 80px;
            height: 80px;
            background-color: orange;
        }
    </style>
</body>
复制代码

flex-direction: row;
align-items: baseline;

------------------------------------------------------------------------------------------------------------

`align-items: stretch`（默认）子元素拉伸（如果子元素未设置高度或设为auto，将占满整个容器的高度）【只示范在`flex-direction：row`的情况】

<body>
    <style>
        .big_box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 130px auto;
            display: flex;
            flex-direction: row;
            align-items: stretch;
        }
        .box {
            width: 80px;
            /* height: 80px; */
            background-color: orange;
        }
    </style>
</body>
复制代码

注意：此处将子元素的高度属性注释掉了，所以可以拉伸（auto也可以拉伸），如果子元素有高度则不能拉伸

flex-direction: row;
align-items: stretch;

------------------------------------------------------------------------------------------------------------

align-content （释义：内容对齐）

align-content的属性有

align-content:flex-start;【与交叉轴的起点对齐】
align-content:center;【与交叉轴的中点对齐】
align-content:flex-end;【与交叉轴的终点对齐】
align-content:space-between;【与交叉轴两端对齐，轴线之间的间隔平均分布】
align-content:space-around;【每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍，和justify-content的space-around原理一样】
align-content:stretch;【默认值】【轴线占满整个交叉轴】

注意：align-content属性如果需要生效的话必须换行，加上flex-wrap：wrap

对于align-items来说只能设置交叉轴上面的一根轴线，当我们设置多根轴线的时候他将不起效果了，此时我们将要使用align-content

<body>
    <style>
        .big_box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 130px auto;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: flex-start;
        }
        .box {
            width: 80px;
            height: 80px;
            background-color: orange;
        }
    </style>
</body>
复制代码

align-content:flex-start;【与交叉轴的起点对齐】

flex-direction:row;
flex-wrap:wrap;
align-items:flex-start;

如图所示，第二根轴线7和8这个子元素并没有执行交叉轴对齐
如果需要将子元素7和8所在的这跟轴线也按照交叉轴对齐则需要使用align-content：flex-start;

<body>
    <style>
        .big_box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 130px auto;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: flex-start;
        }
        .box {
            width: 80px;
            height: 80px;
            background-color: orange;
        }
    </style>
</body>
复制代码

flex-direction:row;
flex-wrap:wrap;
align-content:flex-start;

------------------------------------------------------------------------------------------------------------

align-content:center;【与交叉轴的中点对齐】

flex-direction:row;
flex-wrap:wrap;
align-items:center;

flex-direction:row;
flex-wrap:wrap;
align-content:center;

------------------------------------------------------------------------------------------------------------

align-content:flex-end;【与交叉轴的终点对齐】

flex-direction:row;
flex-wrap:wrap;
align-items:flex-end;

flex-direction:row;
flex-wrap:wrap;
align-content:flex-end;

------------------------------------------------------------------------------------------------------------

align-content:space-between;【与交叉轴两端对齐，轴线之间的间隔平均分布】

flex-direction:row;
flex-wrap:wrap;
align-content:space-between;

------------------------------------------------------------------------------------------------------------

align-content:space-around;【每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍，和justify-content的space-around原理一样】

flex-direction:row;
flex-wrap:wrap;
align-content:space-around;

------------------------------------------------------------------------------------------------------------

<body>
    <style>
        .big_box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 130px auto;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: stretch;
        }
        .box {
            width: 80px;
            /* height: 80px; */             //高度被注释掉了
            background-color: orange;
        }
    </style>
</body>
复制代码

`align-content:stretch`【默认值】【轴线占满整个交叉轴】

flex-direction:row;
flex-wrap:wrap;
align-content:space-stretch;

------------------------------------------------------------------------------------------------------------ 如果您能看到这里不容易，给您点个赞，在flex布局里面还有六个项目属性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

------------------------------------------------------------------------------------------------------------

order【默认值：0】(释义：排序）

官方定义：order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
可能咱看的有点迷糊，不懂啥意思看图：你能将16号盒子排到第一位吗？如果你想改变盒子的位置可以定位到具体的子元素身上，给子元素加上order属性即可
可以加上如下样式代码改变盒子的位置

<style>
        .box:nth-child(16) {
            order: -1
        }
    </style>
复制代码

效果如下

------------------------------------------------------------------------------------------------------------

flex-grow 【默认值：0】（grow释义：成长，长大。这里就是放大的意思）

官方定义：flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
这解释，谁看得懂，没事，看我代码

如果我想要将2号盒子将所在的主轴剩余空间全部撑满的话，只需要定位到二号盒子加上flex-grow：数字即可(这里的数字没有具体的含义，但是类似于权重，数字为0的时候不放大)

<body>
    <style>
        .big_box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 130px auto;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: center;
        }

        .box {
            width: 80px;
            height: 80px;
            background-color: orange;
        }
        .box:nth-child(2){
            background-color: red;
            flex-grow: 1;
        }
        .box:nth-child(3){
            background-color: pink;
        }
    </style>
    
</body>
复制代码

看效果

看到这里您可能恍然大悟，原来就是分配空间的啊。
是的，他的本意就是对所在主轴的空间进行分配的，flex-grow的值只能大于等于0，当大于等于1的时候将会对剩余的空间进行分配，当有多个子元素的flex-grow的值大于1的时候将会按照比例进行分配

<body>
    <style>
        .big_box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 130px auto;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: center;
        }

        .box {
            width: 80px;
            height: 80px;
            background-color: orange;
        }
        .box:nth-child(2){
            background-color: red;
            flex-grow: 1;
        }
        .box:nth-child(3){
            background-color: pink;
            flex-grow：2;
        }
    </style>
    
</body>
复制代码

------------------------------------------------------------------------------------------------------------

flex-shrink 【默认值：1】（shrink释义：缩小）

有放大必然有缩小，flex-shrink就是用来缩小的属性，看官方如何定义的。
官方定义：flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
好像能看懂那么一丢丢了，但是又不完全懂

看代码

<style>
        .big_box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 130px auto;
            display: flex;
            flex-direction: row;
        }
        .box {
            width: 300px;
            height: 80px;
            background-color: orange;
        }
        .box:nth-child(2){
            background-color: red;
        }
    </style>
复制代码

将子元素设置成宽度为300px的，不让他换行

那么所有的盒子都将执行自己的flex-shrink，并将默认值设置为1，以此来适应容器。就比如放大的时候有多余的空间，设置的flex-grow的子元素将会将剩余空间占掉，同理，flex-shrink会根据缺少的空间，每个子元素会向内压缩自己的宽度，直至所有的元素都会占满整个容器盒子
当我们不需要某个盒子向内伸缩的时候，保持他原来的样子的时候，我们可以设置他的缩放比例为0，即flex-shrink：0
代码如下：\

    <style>
        .big_box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 130px auto;
            display: flex;
            flex-direction: row;
        }
        .box {
            width: 300px;
            height: 80px;
            background-color: orange;
        }
        .box:nth-child(2){
            background-color: red;
            flex-shrink: 0;
        }
    </style>
复制代码

当我们对部分子元素不进行缩小，如果总宽度大于容器的宽度，那么将会超出容器\

举栗子

    <style>
        .big_box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 130px auto;
            display: flex;
            flex-direction: row;
        }
        .box {
            width: 300px;
            height: 80px;
            background-color: orange;
        }
        .box:nth-child(2n){
            background-color: red;
            flex-shrink: 0;
        }
    </style>
复制代码

【注：负值对flex-shrink属性无效】

------------------------------------------------------------------------------------------------------------

flex-basis 【默认值：auto】（basis释义：基础）

官方定义：flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
flex-basis有三个常见的属性值，分别是数字，百分比和auto
在容器中如果子元素的有width、flex-basis、和min-width、max-width 属性的时候，flex-basis直接覆盖掉width属性

代码

    <style>
        .big_box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 130px auto;
            display: flex;
            flex-direction: row;
        }
        .box {
            width: 130px;
            height: 80px;
            background-color: orange;
        }
        .box:nth-child(2){
            background-color: red;
            flex-basis: 80px ;
        }
    </style>
复制代码

width是130px，而flex-basis直接覆盖掉130px，变成自己的属性，80px

当flex-basis和min-width比较的时候，需要区分两者的大小，如果flex-basis的值小于min-width的值，flex-basis的值将不生效，如果flex-basis的值大于min-width的值，则生效的是flex-basis的值

flex-basis的值小于min-width的值，flex-basis不生效，生效的是min-width的值

 <style>
        .big_box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 130px auto;
            display: flex;
            flex-direction: row;
        }
        .box {
            min-width: 100px;
            height: 80px;
            background-color: orange;
        }
        .box:nth-child(2){
            background-color: red;
            flex-basis: 80px ;
        }
    </style>
复制代码

flex-basis的值大于min-width的值，min-width不生效，生效的是flex-width的值

<style>
        .big_box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 130px auto;
            display: flex;
            flex-direction: row;
        }
        .box {
            min-width: 100px;
            height: 80px;
            background-color: orange;
        }
        .box:nth-child(2){
            background-color: red;
            flex-basis: 120px ;
        }
    </style>
复制代码

同理，max-width的值大于flex-basis的值得时候，生效的是flex-basis，反之，max-width的值小于flex-basis的值得时候，生效的是max-width;
------------------------------------------------------------------------------------------------------------ 在容器内主轴空间有剩余的时候：当我们的子元素中flex-basis：auto的时候，会根据元素的内容大小进行适配宽度，如果子元素有自定义的宽度，则按照自定义宽度来
在容器内主轴空间没有剩余的时候：当我们的子元素中flex-basis：auto的时候，会根据子元素的flex-grow和flex-shrink属性来配置空间，保证元素在盒子内，如果有子元素的flex-shrink没有设置缩小的时候，auto的值依然有可能让子元素处于容器外面

<style>
        .big_box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 130px auto;
            display: flex;
            flex-direction: row;
        }
        .box {
            min-width: 150px;
            height: 80px;
            background-color: orange;
            flex-shrink: 0;
        }
        .box:nth-child(4){
            background-color: red;
            flex-basis: auto ;
        }
 </style>
复制代码

------------------------------------------------------------------------------------------------------------

flex 【默认值 0,1,auto】

官方定义：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选\

flex: <'flex-grow'>, <'flex-shrink'> , <'flex-basis'>
复制代码

flex有两个内置的简写属性
flex：auto； //（1 , 1 ,auto）
flex：none； //（0 ,0 ,auto）
常见的flex：1;代表的是flex：1 ,1 ,0

简写属性就不多介绍了，只是为了方便书写设置的一个语法糖

------------------------------------------------------------------------------------------------------------

align-self 【默认值：auto】（align-self释义：单个元素）

align-self的常见属性：
align-items: auto;
align-items: flex-start;
align-items: center;
align-items: flex-end;
align-items: baseline;
align-items: stretch;

官方定义：align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

说的花里胡哨的，实际上当我们定义align-items的时候，只是给个别元素起到鹤立鸡群的作用，如果不设置，他的默认值就是auto，auto继承的就是容器内子元素的交叉轴上面的align-items属性

align-self不设置鹤立鸡群的效果的时候，让他默认为auto的时候，他将继承的是容器内的align-items属性的值

<style>
        .big_box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 130px auto;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .box {
            width: 120px;
            height: 80px;
            background-color: orange;

        }
        .box:nth-child(4){
            background-color: red;
            align-self: auto;
        }
    </style>
复制代码

align-self如果需要设置不一样的风格，可以写一个与align-items效果不一样的属性,如下

<style>
        .big_box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 130px auto;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .box {
            width: 120px;
            height: 80px;
            background-color: orange;

        }
        .box:nth-child(4){
            background-color: red;
            align-self: flex-end;
        }
</style>
复制代码

flex的的一些常见布局的介绍就到此结束

--------------------------创作不易，您的点赞就是对我最大的鼓励！！！------------------------------