【CSS】flex配合margin实现元素均匀分布

田本初

于 2024-10-09 08:15:00 发布

阅读量268

点赞数 1

分类专栏： CSS3 文章标签： css 前端

本文链接：https://blog.csdn.net/owo_ovo/article/details/142763799

版权

CSS3 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

现有代码如下，要求不使用网格布局，根据剩余空间设置margin

<div className="container">
  {Array.from({ length: 12 }, (_, i) => i).map((item) => (
    <div className="box">{item}</div>
  ))}
</div>

.container {
  width: 300px;
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ccc;
  background-color: #efefef;

  .box {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    background-color: #bfd;
  }
}

效果如下

在这里插入图片描述

实现

.container {
  margin: 50px;
  width: 300px;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ccc;
  background-color: #efefef;

  .box {
    --n: 5;
    --rest: calc(100% - 50px * var(--n));
    margin: 10px calc(var(--rest) / var(--n) / 2);
    width: 50px;
    height: 50px;
    border-radius: 6px;
    background-color: #bfd;
  }
}