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

发布时间：2020-12-14 18:39:51 所属栏目：资源来源：网络整理

导读：有没有办法使用Flexbox在不同的行上获得相同的列宽？我想为cell-id(宽度必须具有最大cell-width的宽度)具有相同的宽度. 例： div class="container" div class="row" div class="cell cell--id"1/div div class="cell"Test/div /div div class="row" div cl

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

我想为cell-id(宽度必须具有最大cell-width的宽度)具有相同的宽度.

例：

<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>

解决方法

你基本上是在描述一个表,所以你可能应该使用表格布局,例如

.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上设置了死机,我会看到两个选项：

>如果你的行高度相同,你可以换成列专业 – 即把你的列div放在行div之外
>手动管理列的大小,类似于：http://inlehmansterms.net/2014/10/11/responsive-tables-with-flexbox/

但实际上,我认为你想要表格布局.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!