html - CSS Flexbox - 正确对齐单元格列

Question

传统上，我会坚持使用 html 表格，但在我的应用程序中，我必须在此“表格”中添加一些交互(我将使用事件监听器等在行之间实现可折叠窗口)。

所以我决定使用 flexbox 并像 html 表格一样进行模拟。

但是，我无法让每一行按列正确对齐。

.container {
  display: flex;
  flex-wrap: wrap;
  border: black 1px solid;
  width: 100%;
}

.row {
  display: flex;
  height: 40px;
  width: 100%;
  align-items: center;
}

.cell {
  padding-right: 25px;
  padding-left: 20px;
  align-items: center;
  font-size: 20px;
  border-right: 1px solid salmon
}

<div class="container">
  <div class="row">
    <div class="cell">Descrption</div>
    <div class="cell">Amount per Month</div>
    <div class="cell">Amount per year</div>
  </div>
    <div class="row">
    <div class="cell">Income</div>
    <div class="cell">$20,000</div>
    <div class="cell">$45,000</div>
  </div>
</div>

如您所见，每个单元格的右边界没有正确对齐。

是否可以使用 flex-box 来实现这一点？还是我的实现有误？

注意:我不能为此使用任何 JavaScript 或 jQuery。

Answer 1

因为您使用的是 display flex。你可以使用 flex-basis 属性

请看下面的片段

.container {
  display: flex;
  flex-wrap: wrap;
  border: black 1px solid;
  width: 100%;
}

.row {
  display: flex;
  height: 40px;
  width: 100%;
  align-items: center;
}
.row .cell{
  flex:0 0 30%;
}

.cell {
  padding-right: 25px;
  padding-left: 20px;
  align-items: center;
  font-size: 20px;
  border-right: 1px solid salmon
}

<div class="color-div">

</div><div class="container">
  <div class="row">
    <div class="cell">Descrption</div>
    <div class="cell">Amount per Month</div>
    <div class="cell">Amount per year</div>
  </div>
    <div class="row">
    <div class="cell">Income</div>
    <div class="cell">$20,000</div>
    <div class="cell">$45,000</div>
  </div>
</div>