主页 / 问题 / 715924
Accepted
ruslik
Asked:2020-09-08 17:59:15 +0000 UTC2020-09-08 17:59:15 +0000 UTC

具有相等填充的 Flexbox 列

  • 772
<div class="wrapper">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div

CSS

.wrapper {
  display: flex;
  flex-wrap: wrap;

}

.col {
  width: 50%;
  height: 100px;
  border: 1px solid red;
}

.col:nth-child(2n) {
  margin-left: 20px
}

当您不指定 flex-wrap 时，浏览器会调整元素的宽度并将它们设置为固定填充。我需要与 flex-wrap 相同的行为为了使列在具有固定填充和正确换行的同时拉伸（每行 2 列）

html

1 个回答

  1. Best Answer

    要设置列宽，请使用calc()函数：

    * {
  box-sizing: border-box;
}

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

.col {
  width: calc((100% - 20px) / 2);
  height: 100px;
  border: 1px solid red;
}

.col:nth-child(2n) {
  margin-left: 20px
}
    <div class="wrapper">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

    浏览器支持可以在caniuse看到。

    更新考虑关于calc().

    有点 hacky，它原来是一个选项，但它以你需要的方式工作：

    * {
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
}

.col {
  width: 50%;
  height: 100px;
  border: 1px solid red;
  margin: 0 10px;
}

.col:nth-child(2n-1) {
  margin-left: -10px;
}

.col:nth-child(2n) {
  margin-right: -10px;
}
    <div class="wrapper">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

    • 1

相关问题