flex布局常用技巧

1.在一个大方块中任意分配小方块

html代码：

css代码：

.box {
  display: flex;
  flex-wrap: wrap;
}

.row{
  flex-basis: 100%;
  display:flex;
}

.row:nth-child(2){
  justify-content: center;
}

.row:nth-child(3){
  justify-content: space-between;
}

将小方块分行，即可自由指定其位置

2.网格布局

html代码：

css代码：

        .box{
            display: flex;
        }

        .inner{
            flex: 1;
            margin-right: 20px;
        }

        .inner:last-child{
            margin-right: 0;
        }

        .inner:nth-child(2){
            flex: 0 0 50%;
        }

主要是设置网格的flex-basis属性，确定其所占主轴的尺寸，可以改变其宽度，此时设置width属性无效

3.圣杯布局

html代码：

css代码：

        body{
            display: flex;
            min-height: 100vh;
            flex-direction: column;
        }

        header,footer{
            flex: 1;
        }

        .container{
            display: flex;
        }

        main{
            display: flex;
            flex: 1;
        }

        nav,aside{
            flex: 0 0 12em;
        }

        nav{
            order: -1;
        }

使用html5语义化标签，同时使用vh单位表示视口大小，使用一次垂直的flex布局，在使用一次水平的flex布局