Flexbox 动态列宽

问题描述

我只是忙于将 flexBox 与常规 html 表格进行比较，我想知道是否有可能获得一个 flexBox 布局来处理动态宽度，类似于 html 表格在默认情况下的处理方式。

width:100% html 表格将根据列内容很好地处理列宽，而我使用 flexBox 最接近它的是以下内容

<div class="table">
  <div>
    <div>
      <p>nothing 01</p>
    </div>
    <div>
      <p>nothing 01</p>
    </div>
  </div>
  <div>
    <div>
      <p>nothing 02</p>
    </div>
    <div>
      <p>Nootthhiinngg 02</p>
    </div>
  </div>
  <div>
    <div>
      <p>nothing 03</p>
    </div>
    <div>
      <p>Nooootttthhhhiiiinnnngggg 03</p>
    </div>
  </div>
</div>

有了这个 css

.table { display:flex; width:100%; }
.table > div { flex-grow:1; }
.table > div > div { border:solid 1px #333333; }

看起来它已经接近于很好地完成了，但是屏幕扩大得越大，它看起来就越接近相等的列宽

这是为了更好地显示 html 表和这个 flexBox 表之间的比较的小提琴

https://jsfiddle.net/atu6b1ye/2/

我知道您可以使用 display:table（包含在小提琴中）创建一个纯 css 表，但它与常规 html 表有类似的缺点，因为它不允许您按列分解它就像在 flexBox 表中用于响应式布局一样

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

css-tables flexbox flexbox html