CSS / Flexbox：与最大元素相同的宽度，如列

Question

我为我的应用程序构建了一个列表组件，由于样式，我无法使用表格。

我希望将这些元素放在＆＃34;行＆＃34;从上到下具有相同的宽度，如列。代码看起来类似于：

<div class="row">
  <div class"element>iPhone </div>
  <div class"element>Buy an iPhone now!</div>
</div>
<div class="row">
  <div class"element>Airport Express </div>
  <div class"element>Buy an Airport Express now!</div>
</div>
<div class="row">
  <div class"element>iPad </div>
  <div class"element>Buy an iPad now!</div>
</div>

目前的情况如下：

这就是我想要的：

有办法做到这一点吗？

Answer 1

使用CSS表：

• border-spacing
行之间的分隔
• 细胞中的边界。您可以使用border-radius来围绕它们。
• 伪元素显示为单元格以填充右侧的可用空间
• white-space: nowrap以防止细胞因伪元素而缩小。

.wrapper {
  display: table;
  border-spacing: 0 10px;
}
.row {
  display: table-row;
  border: 1px solid;
}
.row::after {
  content: '';
  display: table-cell;
  width: 100%;
  border: 1px #6AACC9;
  border-style: solid none;
}
.element {
  display: table-cell;
  border: 1px solid #6AACC9;
  border-right-color: #adadad;
  border-left-style: none;
  padding: 5px;
  white-space: nowrap;
}
.element:first-child {
  border-left-style: solid;
  border-radius: 5px 0 0 5px;
}

<div class="wrapper">
  <div class="row">
    <div class="element">iPhone </div>
    <div class="element">Buy an iPhone now!</div>
  </div>
  <div class="row">
    <div class="element">Airport Express </div>
    <div class="element">Buy an Airport Express now!</div>
  </div>
  <div class="row">
    <div class="element">iPad </div>
    <div class="element">Buy an iPad now!</div>
  </div>
</div>

Answer 2

你不能用flexbox做到这一点。不能在不共享父级的元素之间平衡维度。

但您可以使用 CSS表格

.row {

  display: table-row;

}

.element {

  display: table-cell;

  border: 1px solid grey;

  padding: 8px;

}

<div class="row">
  <div class="element">iPhone</div>
  <div class="element">Buy an iPhone now!</div>
</div>
<div class="row">
  <div class="element">Airport Express</div>
  <div class="element">Buy an Airport Express now!</div>
</div>
<div class="row">
  <div class="element">iPad</div>
  <div class="element">Buy an iPad now!</div>
</div>