CSS核心（五十九）使用弹性布局的多种九宫格排版方式灵活实现元素的自由摆放

人亦已歌 · 发表于 2023-2-2 12:30:12

通过前面的讲解，我们可以将弹性盒子中的子盒子排列在弹性盒子中的上中下左中右任意位置，即九宫格摆放。
在实际应用中，我们往往会先使用弹性布局方式将弹性盒子中的子盒子先摆放在大概的位置上，然后再使用定位来微调。

下面我们看如何实现子盒子的9宫格摆放。
方式一、控制弹性盒子的宽高，使用warp换行，然后使用align-content

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用弹性布局的多种方式灵活实现九宫格排版</title>
</head>
<style>
        .box{
                width:600px;
                height:240px;
                border:1px solid #000;
                /* 设置弹性容器 */
                display:flex;
                flex-direction:column;
                flex-wrap: wrap;
                align-content:space-between
        }
        .box div{
                width:110px;
                height:80px;
                font-size: 12px;
        } 
        .d1{
                background-color:#55aa00;
        }
        .d2{
                background-color:#aa557f;
        }
        .d3{
                background-color:#aaaaff;
        }
        .d4{
                background-color:#ff55ff;
        }
        .d5{
                background-color:#ffff00;
        }
        .d6{
                background-color:#55ffff;
        }
        .d7{
                background-color:#aaff7f;
        }
        .d8{
                background-color:#aaaa00;
        }
        .d9{
                background-color:#ffaa00;
        }
</style>
<body>
<div class="box">
        <div class="d1">第一个盒子</div>
        <div class="d2">第二个盒子</div>
        <div class="d3">第三个盒子</div>
        <div class="d4">第四个盒子</div>
        <div class="d5">第五个盒子</div>
        <div class="d6">第六个盒子</div>
        <div class="d7">第七个盒子</div>
        <div class="d8">第八个盒子</div>
        <div class="d9">第九个盒子</div>
</div>
</body>
</html>

以上，我们只需要修改align-content的对齐模式即可，排版变得非常轻松，但这样做有个问题，那就是：如果后续要使用定位进行微调比较麻烦。

方式二、将多行为多组，每组中包含一行，当做单行元素处理（常用）。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用弹性布局的多种方式灵活实现九宫格排版</title>
</head>
<style>

        .d{
                width:110px;
                height:80px;
                font-size: 12px;
        }
        .d1{
                background-color:#55aa00;
        }
        .d2{
                background-color:#aa557f;
        }
        .d3{
                background-color:#aaaaff;
        }
        .d4{
                background-color:#ff55ff;
        }
        .d5{
                background-color:#ffff00;
        }
        .d6{
                background-color:#55ffff;
        }
        .d7{
                background-color:#aaff7f;
        }
        .d8{
                background-color:#aaaa00;
        }
        .d9{
                background-color:#ffaa00;
        }
        

        .item{
                width:600px;
                height: 80px;
                /* 将每一组设置为弹性盒子,按行排列,两端对齐 */
                display:flex;
                flex-direction:row;
                justify-content: space-between;
        }
        
        
        .box{
                width:600px;
                height:440px;
                border:1px solid #000;
                /* 将最外层的父盒子也设置为弹性盒子，按行排列，换行，两端对齐 */
                display:flex;
                flex-direction:row;
                flex-wrap: wrap;
                align-content: space-between;
        }
</style>
<body>
<div class="box">
        <div class="item item1">
                <div class="d d1">第一个盒子</div>
                <div class="d d2">第二个盒子</div>
                <div class="d d3">第三个盒子</div>
        </div>
        <div class="item item2">
                <div class="d d4">第四个盒子</div>
                <div class="d d5">第五个盒子</div>
                <div class="d d6">第六个盒子</div>
        </div>
        <div class="item item3">
                <div class="d d7">第七个盒子</div>
                <div class="d d8">第八个盒子</div>
                <div class="d d9">第九个盒子</div>
        </div>
</div>
</body>
</html>

以上代码中item弹性盒子是一行，共有三行，可通过单行对齐属性justify-content，修改item中子元素的排列方式。
box是最外层的大弹性盒子，使用换行后，也有三行。可通过多行对齐属性align-content，修改box中三个item的对齐方式。
两个对齐属性互相配合，可实现各种各样的排列效果。
并且由于最里层的每一个小盒子都在一个单行的div中，很容易使用定位来实现微调。

比如：我们要调整中间黄色小盒子，即第五个小盒子，让它向左边去一点，只要使用如下代码：

.item2{
position: relative;
}
.d5{
position: absolute;
left: 150px;
}

复制代码

显示效果为：

解释一下：

第5个盒子在第2个item中，我们先将第2个item做相对定位，目的是控制里面的子盒子，不让它们脱离标准流。
然后对第5个子盒子使用绝对定位，随意偏移即可。

通过以上的学习，我们已经可以用弹性布局+定位的方式实现任意元素摆放在任意位置的需求，以上就是弹性布局的全部。
请大家务必认真理解以上代码，这或许是全网讲的最清楚的弹性布局了。

最后贴上完整代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用弹性布局的多种方式灵活实现九宫格排版</title>
</head>
<style>

        .d{
                width:110px;
                height:80px;
                font-size: 12px;
        }
        .d1{
                background-color:#55aa00;
        }
        .d2{
                background-color:#aa557f;
        }
        .d3{
                background-color:#aaaaff;
        }
        .d4{
                background-color:#ff55ff;
        }
        .d5{
                background-color:#ffff00;
        }
        .d6{
                background-color:#55ffff;
        }
        .d7{
                background-color:#aaff7f;
        }
        .d8{
                background-color:#aaaa00;
        }
        .d9{
                background-color:#ffaa00;
        }
        

        .item{
                width:600px;
                height: 80px;
                /* 将每一组设置为弹性盒子,按行排列,两端对齐 */
                display:flex;
                flex-direction:row;
                justify-content: space-between;
        }
        
        
        .box{
                width:600px;
                height:440px;
                border:1px solid #000;
                /* 将最外层的父盒子也设置为弹性盒子，按行排列，换行，两端对齐 */
                display:flex;
                flex-direction:row;
                flex-wrap: wrap;
                align-content: space-between;
        }
        
        .item2{
                position: relative;
        }
        .d5{
                position: absolute;
                left: 150px;
        }
</style>
<body>
<div class="box">
        <div class="item item1">
                <div class="d d1">第一个盒子</div>
                <div class="d d2">第二个盒子</div>
                <div class="d d3">第三个盒子</div>
        </div>
        <div class="item item2">
                <div class="d d4">第四个盒子</div>
                <div class="d d5">第五个盒子</div>
                <div class="d d6">第六个盒子</div>
        </div>
        <div class="item item3">
                <div class="d d7">第七个盒子</div>
                <div class="d d8">第八个盒子</div>
                <div class="d d9">第九个盒子</div>
        </div>
</div>
</body>
</html>

kangzhen8494 · 发表于 2023-2-21 12:55:13

^高手！！！

边沿忍者 · 发表于 2023-2-26 14:44:08

我才小学四年级，看不懂

沙和尚 · 发表于 2023-3-3 04:07:10

perfect

flord · 发表于 2023-3-9 15:13:06

我是刚学编程的，也可以说是计算机刚入门吧，没有扎实的基础，想象力也不够丰富，但是我不会不钻牛角尖，我比较崇尚劳逸结合，虽然我对答案有很强的渴求欲，但是当我想不出来的时候，我会选择与人交流，而不是埋首苦干。“也许在一次和别人不经意的谈话中，就可以迸出灵感的火花。多上上网，看看别人对同一问题的看法，会给你很大的启发。”对此我很赞同，同时我也希望我能够提高点我的韧性和毅力，这是现阶段自认为最欠缺的，看来真应该试试“找个10000以内的素数表，把它们全都抄下来，然后再检查三遍”哈哈，只怕我很难坚持下来啊

hyfage · 发表于 2023-3-16 00:02:47

很感谢你,也很敬佩你!原来我认为中国的程序员是很自私的,这是因为我有一个亲叔叔在一汽车公司做推销员,但是在他那里员工彼此之间很保守很封闭,从不把自己的经验心得和体会与同事们共享,反而却要去勾结和拔节他们,打他们的马屁才能偷窥到一点点技能；还有，在我这里的电脑诚里所有的电脑技术人员彼此之间更像是敌人和间谍，当某人掌握了某项技术之后只会一味的炫耀和挖苦别人，绝不会拿出来一起分享和进步。我终于明白“中国人一个人是条龙，一群人是堆臭虫”了，真不知这是对我们华夏儿女的褒扬还是讽刺！但是，今天看了楼长的文章，看来我抱怨太片面了，似乎有点惭愧了！真高兴，有您这样的前辈。真希望，在中华大地上，能有更多像前辈这样的人。如果那样，我相信，我们中国的软件业可以统领全世界！