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

Posted 2023-03-05

【中文标题】flex-box 2x2 网格的内部填充和边框

【英文标题】：Inner padding and border for a flex-box 2x2 grid

【发布时间】：2018-05-20 01:39:58

【问题描述】：

我尝试使用 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 个单独的网格中放置一些文本并在其周围放置一些填充。此外，我正在尝试仅在内部添加边框。谁能帮帮我？

【参考方案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>

【讨论】：

谢谢。它有效 :) 但是如果我们从单个盒子中获取填充元素并垂直居中会怎样。我该怎么做？

@AnjanaNilupul 从元素中删除 paddin 并添加这些样式 display: inline-flex; align-items: center; justify-content: center; 然后您的内容将垂直和水平居中;)