flex布局实现简易九宫格

最新推荐文章于 2025-04-07 21:56:56 发布

原创最新推荐文章于 2025-04-07 21:56:56 发布 · 442 阅读

0 ·

CC 4.0 BY-SA版权

前端web 专栏收录该内容

13 篇文章

订阅专栏

这段代码展示了如何使用CSS创建一个600px宽、600px高的网格布局，包含9个元素。每个元素宽高为150px，背景色为绿色或蓝色，间隔20px。CSS中使用了flexbox布局，包括justify-content、flex-direction、flex-wrap和align-items属性来调整元素的位置和方向。

直接上代码：

//HTML部分
	<div class="warp">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>
//css部分
    <style>
		.warp{
            width: 600px;
            height: 600px;
            border: 1px solid gray;
            display: flex;
            justify-content: center;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
        }
        .item{
            width: 150px;
            height: 150px;
            background-color: green;
            font: 40px/150px '';
            flex-direction: column;
            text-align: center;
            margin: 0 20px;
        }
        .item:nth-child(2n){
            background-color: blue;
        }
    </style>