flex-box 2x2 网格的内部填充和边框

Question

我尝试使用 flexbox 实现的 2x2 存在一些问题。我正在努力实现这样的目标。

每个网格都应包含等量的填充。此外，还需要仅在内部添加边框。 （网格内，像个十字）

这是我想出的代码，但它不能正常工作。

HTML

<div class="info-box">
<div class="info-item grid1"></div>
<div class="info-item grid2"></div>
<div class="info-item grid3"></div>
<div class="info-item grid4"></div>
</div>

CSS

.info-box {
margin: 2rem auto 0 auto;
text-align: center;
display: flex;
flex-wrap: wrap;
flex-flow: row wrap;
flex-direction: column;
.info-item {
  flex: 1 1 calc(50%);
  background: $light;
  &:nth-child(odd) {
    flex: 0 0 50%;
  }
}
}

如何在这 4 个单独的网格中放置一些文本并在其周围放置一些填充。此外，我正在尝试仅在内部添加边框。谁能帮帮我？

Answer 1

您可以简单地在内部元素上使用border，在容器上使用padding。也无需指定 flex 方向，因为在您的情况下它应该是 row （默认值）。不要忘记添加box-sizing: border-box 以避免任何溢出问题。

所以你可以试试这样的：

* {
  box-sizing: border-box;
}

.info-box {
  margin: 2rem auto 0 auto;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  border:1px solid;
  padding:50px;
}

.info-item {
  flex: 1 1 50%;
  min-height: 100px;
  padding:50px;
}
.grid1 {
  border-right:1px solid;
  border-bottom:1px solid;
}
.grid2 {
  border-bottom:1px solid;
  border-left:1px solid;
}
.grid3 {
  border-top:1px solid;
  border-right:1px solid;
}
.grid4 {
  border-left:1px solid;
  border-top:1px solid;
}

<div class="info-box">
  <div class="info-item grid1">1</div>
  <div class="info-item grid2">2</div>
  <div class="info-item grid3">3</div>
  <div class="info-item grid4">4</div>
</div>

或者另一种避免使用边框的解决方案是使用这样的伪元素：

* {
  box-sizing: border-box;
}

.info-box {
  margin: 2rem auto 0 auto;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  border:1px solid;
  padding:50px;
  position:relative;
}
.info-box:before {
  content:"";
  position:absolute;
  background:#000;
  width:2px;
  right:50%;
  margin-right:-1px;
  top:50px;
  bottom:50px;
}
.info-box:after {
  content:"";
  position:absolute;
  background:#000;
  height:2px;
  top:50%;
  margin-top:-1px;
  left:50px;
  right:50px;
}

.info-item {
  flex: 1 1 50%;
  min-height: 100px;
  padding:50px;
}

<div class="info-box">
  <div class="info-item grid1">1</div>
  <div class="info-item grid2">2</div>
  <div class="info-item grid3">3</div>
  <div class="info-item grid4">4</div>
</div>