CSS Flex 布局如何设置元素间距，生成像 Grid 布局一样的、带间隙的表格

最新推荐文章于 2024-05-27 15:28:58 发布

lalaxuan

最新推荐文章于 2024-05-27 15:28:58 发布

阅读量7.5k

点赞数 3

分类专栏： CSS实用技巧文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_45732235/article/details/127950227

版权

CSS实用技巧专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在之前的flex布局设置边距使用的是margin 但是它会导致第一列或者是最后一列有多余的边距，所以排版就不是我们预期的效果

代码为：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .flex-container {
        width: 448px;
        display: flex;
        flex-wrap: wrap;
        border: 2px solid #11acd4;
      }

      .flexbox {
        width: 200px;
        height: 190px;
        background-color: #11acd4;
        color: #fff;
        margin: 24px 0 0 24px;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="flexbox">item1</div>
      <div class="flexbox">item2</div>
      <div class="flexbox">item3</div>
      <div class="flexbox">item4</div>
      <div class="flexbox">item5</div>
      <div class="flexbox">item6</div>
    </div>
  </body>
</html>

在这里插入图片描述

以上效果的核心代码为：

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

 .flexbox {
   margin: 24px 0 0 24px;
 }

gap

使用gap可以解决以上情况

.flex-container {
   display: flex;
   flex-wrap: wrap;
 }
 .flexbox {
 // 这里面不在设置margin
  }

在这里插入图片描述

兼容

但是gap这种方式存在兼容性问题
Margin方式（IE11）

.flex-container {
	margin: -24px 0 0 -24px;
}
.flexbox {
	margin: 24px 0 0 24px;
}

lalaxuan

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS Flex 布局如何设置元素间距，生成像 Grid 布局一样的、带间隙的表格

峰华前端工程师视频
复制链接

扫一扫

专栏目录

CSS Flex 布局如何设置元素间距，生成像 Grid 布局一样的、带间隙的表格

gap

兼容

“相关推荐”对你有帮助么？