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