flex布局实现简易九宫格

最新推荐文章于 2024-09-19 11:57:55 发布

Su__py

最新推荐文章于 2024-09-19 11:57:55 发布

阅读量396

点赞数

分类专栏：前端web

本文链接：https://blog.csdn.net/su__py/article/details/118681087

版权

前端web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

直接上代码：

//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>