如何使用Flexbox获得相同的列宽？

Question

有没有办法使用Flexbox在不同的行上获得相同的列宽？

我希望具有相同的宽度cell--id(宽度必须具有最大的宽度cell--id).

例:

<div class="container">
  <div class="row">
    <div class="cell cell--id">1</div>
    <div class="cell">Test</div>
  </div>
  <div class="row">
    <div class="cell cell--id">2222</div>
    <div class="cell">Test</div>
  </div>
</div>

CSS:

<style>
   .row { display: flex }
</style>

Answer 1

你需要思考：

• 在一列或多列的行中 => 行是灵活的容器
• 或者在一行或多行的列中 => 列是灵活的容器
• 内容是灵活的项目（并且可以嵌套灵活的容器）

在你的情况下，你需要给 .row 一个宽度，并使 flexbox 将单元格均匀地分割在行上：

.row  { display: flex; width: 300px }
.cell { flex: 1 } /* each cell width will be: available space divided by the number of cells */

好的，这是 POC：

.row  { display: flex; width: 300px }
.cell { flex: 1 } /* each cell width will be: available space divided by the number of cells */

        .row    { display: flex; width: 500px }
        .cell   { flex: 1 }

Answer 2

您基本上是在描述表格，因此您可能应该使用表格布局，例如

.row { display: table-row }
.cell { display: table-cell }

<div class="container">
  <div class="row">
    <div class="cell cell--id">1</div>
    <div class="cell">Test</div>
  </div>
  <div class="row">
    <div class="cell cell--id">2222</div>
    <div class="cell">Test</div>
  </div>
</div>

如果你对 flexbox 死心塌地，我会看到两个选项：

1. 如果您的行将具有相同的高度，您可以切换到列主 - 即将您的列 div 放在您的行 div 之外
2. 手动管理列的大小，类似于：http : //inlehmansterms.net/2014/10/11/responsive-tables-with-flexbox/

但实际上，我认为您想要表格布局。