平衡 flexbox 和网格中的列宽

Question

我在宽度为 600px 的 parent 容器中有两列。 children 的字符长度决定了列宽（加权拆分）。但是，随着两列的宽度越来越相似，平衡（50/50 拆分）布局应该是首选，如下图所示。

是否可以在 flexbox 或 grid 中实现这种布局，而无需 javascript？我想象根据阈值确定字符串长度和切换 css 属性将是一个我不想下降的选项。

我的目的不是创建单一类型的拆分，而是让布局有条件地尊重两种拆分。

.container {
  outline: 1px solid red;
  width: 100%;
  height: 60px;
  display: flex;
}

.child {
  padding: 0.5px;
  outline: 1px solid black;
  display: grid;
  place-content: center;
}

.grow {
  flex-grow: 1; /* flexible split */
}

.balanced {
  width: 100%; /*  50-50 split */
}

<div class="container">
  <div class="child grow">
    asdasdasdasd
  </div>
  <div class="child grow">
    asdaassdasdasdsdasdasd
  </div>
</div>
<div class="container">
  <div class="child balanced">
    asdasdasdasd
  </div>
  <div class="child balanced">
    asdaassdasdasdsdasdasd
  </div>
</div>

Answer 1

只需添加最大宽度？

.container {
  outline: 1px solid red;
  width: 100%;
  height: 60px;
  display: flex;
}

.child {
  padding: 0.5px;
  outline: 1px solid black;
  display: grid;
  place-content: center;
}

.grow {
  flex-grow: 1;
  max-width:50%;
}

.balanced {
  width: 100%;
  /*  50-50 split */
}

<div class="container">
  <div class="child grow">
    asdasdasdasd
  </div>
  <div class="child grow">
    asdaassdasdasdsdasdasd
  </div>
</div>
<div class="container">
  <div class="child balanced">
    asdasdasdasd
  </div>
  <div class="child balanced">
    asdaassdasdasdsdasdasd
  </div>
</div>

Answer 2

单独使用flex-grow不直接解决你的问题吗？

查看代码片段：

.container {
  outline: 1px solid red;
  width: 100%;
  height: 60px;
  display: flex;
}

.child {
  padding: 0.5px;
  outline: 1px solid black;
  display: grid;
    flex-grow: 1; /* flexible split */

  place-content: center;
}

<div class="container">
  <div class="child">
    asdasd
  </div>
  <div class="child">
    asdaassdasdasdsdasdasd
  </div>
</div>
<div class="container">
  <div class="child">
    asdasdasdasd
  </div>
  <div class="child">
    asdaassdasdasdsdasdasd
  </div>
</div>
<div class="container">
  <div class="child">
    asdaassdasdasdsdasdasd
  </div>
  <div class="child">
    asdaassdasdasdsdasdasd
  </div>
</div>

Answer 3

同时我找到了答案。

设置 flex-basis 在列宽相似时强制执行 50/50 拆分。通过设置 flex-grow 和 flex-shrink.

遵守不等分

.parent {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 50%;
  padding-right: 1em;
  padding-left: 1em;
}

平衡 flexbox 和网格中的列宽

Balancing column width in flexbox and grid

css

flexbox

css-grid