如何获得相同的列宽度使用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 { 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/

但实际上，我认为你需要的是表格布局。

Answer 2

你需要思考:

• 在一个或多个列的行中=>行是灵活的容器
• 或列中有一行或多行=>列是灵活的容器
• 内容为柔性项(可嵌套柔性容器)

在你的情况下，你需要给。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: 500px }
        .cell   { flex: 1 }

<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 class="row">
    <div class="cell cell--id">2222222222222</div>
    <div class="cell">Test</div>
  </div>
</div>