通过兵马俑排列讲清Flex、Grid布局

前言：

公元前246年

秦始皇横扫六合，一统中华，自觉功高盖世，遂召李斯

秦始皇："朕一统天下，死后理应有幽冥大军护我左右，应当以活人同殉"

李斯："不可，以活人殉，显暴戾，若以陶土代之，既可彰陛下天威，又可安民心"

秦始皇："善，朕欲陶士每行四尊，每列三具，列阵整肃齐列"

李斯心想：'你这老登，死这为难我，废了，脑袋保不住了'

恍惚之际，神光显于李斯周身，一英俊潇洒，酷似吴彦祖的男人现于李斯身侧

男人说道："我来助你成千秋伟业"

屏幕前的各位已经穿越到了公元前246年的西安，化身吴彦祖，一起来帮助李斯吧

一、全兵士情况

flex布局是实现兵马俑排列的较为复杂的方式，当兵马俑内全部是兵士时，和grid布局差异不大

Flex布局

布局效果

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .box {
            height: 200px;
            width: 400px;
            background-color: orange;
            margin-right: 20px;
            margin-bottom: 30px;
        }

        .box:nth-child(4n) {
            margin-right: 0;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
</body>
</html>

Grid布局

布局效果

1、grid-template-columns: repeat(4, 1fr);

这里的fr，代表占用一个格子，repeat(4,1fr)表示一行四个盒子，每个盒子占用一个格子,也可以写成grid-template-columns: 1fr 1fr 1fr 1fr;这种形式，里面的属性也可以换成px，纵向同理

2、gap是行列间距

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }

        .box {
            height: 200px;
            background-color: orange;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
</body>
</html>

二、第一行中间加入一辆2*2的战车

秦始皇突发奇想，要求李斯在原本十二兵士前排中心插入一辆2*2的战车，发挥你们的能力救救李斯

这种情况下不建议使用flex布局，过于复杂，这里只展示gird布局方式

布局效果

gird-column:2/4：表示从第2列开始，占据2个格子
grid-row: 1/3：表示从第1行开始，占据2个格子

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;

        }

        .box {
            height: 200px;
            background-color: orange;
        }

        .box1 {
            grid-column: 2/4;
            grid-row: 1/3;
            background-color: pink;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
</body>
</html>

三、自适应布局

秦始皇又要求李斯，能够使得兵士根据墓道大小自动改变行列排列，李斯此刻正在三角洲大量购买全家福，企图保住他的浮木，请帮助他

自适应布局仍然推荐使用Grid，导航栏的话可以使用Flex

grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); 这种写法可以用来做响应式布局，auto-fil主轴上指定的宽度或者重复次数是最大可能的正整数，minmax最小值255px、最大值1fr代表剩余空间的比例。

李斯此刻恍然大悟，默默收起了全家福以备下次使用，请各位彦祖跟李斯一起完成兵马俑坑道的建设吧