如何在3x2布局中与Flexbox对齐5个盒子？

Question

我正在尝试将5个输入框与3x2布局与CSS Flexbox对齐。三个框应在第一行，两个盒子应在第二行上。我希望每个盒子看起来都以200px的宽度看起来相同，并与另一行上的相应盒子对齐。

这些盒子完全包裹了我在每个断点处的想要的方式，但是有一个小的未对准第二行的第二个盒子大约向上600-700px。我不想将CSS网格用作解决方法。我已经在代码片段中附加了工作。

什么会导致该错误，我该如何解决？ 谢谢。

.my-grid {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1rem;
  column-gap: 1rem;
  background-color: #808080;
  justify-content: space-between;
}

.item {
  width: 200px;
}

.new-row {
  flex-basis: 100%;
  height: 0;
}

.spacer {
  width: 200px;
}

<div class="my-grid">
  <input class="item"></input>
  <input class="item"></input>
  <input class="item"></input>
  <div class="new-row"></div>
  <input class="item"></input>
  <input class="item"></input>
  <div class="spacer"></div>
</div>

Answer 1

您看到的是输入字段上的默认填充。我只需添加一个通用选择器 *， *::之前， *:: at {margin：0;填充：0;盒子大小：边框框； } 到文档的开始，因为以后我总是在元素上设置这些属性，如果我不这样做，我宁愿浏览器不尝试为我做。另外，＆lt; input＆gt; 是自我关闭，您不需要＆lt;/input＆gt;

您也可以根据需要将其专门设置为输入，输入{padding：0;} ，但输入不是唯一具有默认值的元素。

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.my-grid {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1rem;
  column-gap: 1rem;
  background-color: #808080;
  justify-content: space-between;
}

.item {
  width: 200px;
}

.new-row {
  flex-basis: 100%;
  height: 0;
}

.spacer {
  width: 200px;
}

<div class="my-grid">
  <input class="item">
  <input class="item">
  <input class="item">
  <div class="new-row"></div>
  <input class="item">
  <input class="item">
  <div class="spacer"></div>
</div>

Answer 2

• 显示：flex 在 flex方向：row 时，将彼此相邻设置一个flex-item。
• flex：1 是速记属性，可以使所有孩子的大小保持相同。
• 您已经使用了 flex-wrap：包装，在包装溢出的flex孩子时确实需要。
• 现在，我使用：nth-​​child 选择前三个孩子的选择器。
• .my-Grid .Item：nth-​​child（1）.my-Grid .Item：nth-​​child（2）.my-grid .Item：nth-​​child（3）（3）。
• 要在第一个 Imaginery -Row 中设置第两个 flex -item 我使用了 flex：1 0 calc（33.33％-2REM -20PX）。

flex：1 0 calc（33.33％-2REM -20px） 33.33％，因为我们需要3种100％ width ，然后 -2REM -2REM 1 rem 的差距 1REM + 1REM 。和 -20px 因为我添加了填充：10px to .mygrid 是左侧10px和10px右侧，因此总计20px。 P>

.my-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  background-color: #808080;
  justify-content: space-between;
  padding: 10px;
}

.my-grid .item:nth-child(1),
.my-grid .item:nth-child(2),
.my-grid .item:nth-child(3) {
  flex: 1 0 calc(33.33% - 2rem - 20px);
}

.my-grid .item {
  flex: 1;
}

<div class="my-grid">
  <input class="item"></input>
  <input class="item"></input>
  <input class="item"></input>
  <input class="item"></input>
  <input class="item"></input>
</div>