如何快速上手flex弹性盒子布局?

文章参考视频链接： https://www.bilibili.com/vide...建议看视频特别易懂哦，以下是文字解释。

CSS3 flexbox

开启flex布局只需在最外层的父盒子容器里设置display:flex即可，整个网页都可以看成一个flex容器，采用flex布局称之为flex容器，所有的子容器自动生成容器成员称之为flex项目。


    1
    2
    3

 body{
        height: 100vh;
        display: flex;
    }

flex的布局

容器默认存在两根轴：水平main-axis(水平主轴),cross axis(交叉轴)。水平主轴的开始位置叫做main start,结束位置叫做mian end;同理，交叉轴的开始cross start,结束位置cross end;

容器属性

容器属性都是设置在容器上的，例如 justify-content, align-items,`flex->
decoration ,flex-wrap`

html代码，css部分给盒子宽高背景色就行：


    a
    b
    b

当我们给父盒子flex属性时候,默认排列成一行:

    body{
        width: 100%;
        height: 100vh;
        display: flex;
    }
    .box{
        width: 300px;
        height: 300px;
        background-color: blue;
    }

水平主轴方向`justify-content`

当我们(在css：body内)加上justify-content:center时候,盒子会居中；

交叉轴方向`align-items`

默认：align-items: flex-start;

项目中我们常把 justify-content:center和 align-items:center一起使用,效果如下：

flex-direction

（这个属性记住reverse是反转就很好记忆了）
flex-direction: row;默认：按行排列

flex-wrap

我们另外书写代码便于理解：

html部分

css部分

 body{
            background-color: #00CC52;
        }
        .outer {
            width: 300px;
            height: 300px;
            display: flex;
            margin: 0 auto;
            /* 这里修改你的flex-wrap查看不同的效果 */
            /* flex-wrap: nowrap; */
            background-color: #fff;
        }

        .box {
            width: 60px;
            height: 50px;
            background-color: #d6d6d6;
            line-height: 50px;
            text-align: center;
            font-size: 25px;
        }
        /* 偶数个数的盒子设置背景颜色，便于理解区分 */
        .box:nth-child(2n){
            background-color: rgb(179, 179, 179);
        }

写完上面代码后默认效果：

项目属性

设置在项目自身上: order, flex, align-self

oreder

用于决定项目排列顺序，数值数组越小，项目排列越靠前

 body {
            margin: 0;
            background-color: rgb(30, 177, 91);
            width: 100%;
            height: 100vh;
            display: flex;
        }

        .box {
            width: 300px;
            height: 300px;
            background-color: #fff;
            text-align: center;
            line-height: 300px;
            font-size: 100px;
        }
        .box:nth-child(1){
            order: 2;
        }
        .box:nth-child(2) {
            background-color: #eee;
            order: 1;
        }
        .box:nth-child(3) {
            order: 0;
        }

align-self

设置单个项目的排列,补充下面代码：

 .box:nth-child(2) {
            background-color: #eee;
            /* 居中 */
            align-self: center;
            /* 默认 */
            /* align-self: flex-start; */
            /* 底部 */
            /* align-self: flex-end; */
        }

flex-grow

用于控制子盒子的平分

给第二个盒子添加，去试试吧！

 .box:nth-child(2) {
            flex-grow: 1;
            background-color: #eee;
        }

flex-shrink

默认是1，用于决定项目在空间不足时是否缩小，默认项目是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。但是如果某个项目的flex-shrink设置为0，即便空间不够，也不会缩小
可以给第二个盒子添加，快去试试吧

flex-basis

默认auto，用于设置项目宽度，默认auto时，项目会保存默宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会比width属性高，因此会覆盖width属性。（简单点说，覆盖width属性）

flex-grow flex-shrink flex-basis合并简写格式:

flex:0 1 auto;---------flex:grow,shrink,basis;
用于定义项目放大，缩小和宽度，该属性有两个快捷键值，分别是auto（1 1 auto）等放大缩小，与none（0,0，auto）不放大，但等分缩小。