Flexbox — 忽略子元素的包装答案

【问题标题】：Flexbox — Ignore wrapper for child elementsFlexbox — 忽略子元素的包装
【发布时间】：2018-08-19 06:29:32
【问题描述】：

我有一个包含 x 个元素的 flex 容器，其中每个元素包含 y 个子元素。

我正在尝试根据孩子而不是父母平均分配容器空间。

目前发生的情况是：

{ [ 2 个孩子 ] [ 5 个孩子 ] [ 3 个孩子 ] }

[] 块目前的宽度相同，所以第一个块很宽敞（只有 2 个孩子），但中间的块很窄。

我需要用于样式目的的包装器，但似乎无法让空间划分基于子代而不是“父代平等，然后子代平等”。

我没有为任何东西指定宽度，只是flex: 1 0，并且孩子的数量不是静态的，所以我不能使用显式宽度。

body {
  font-family: sans-serif;
  font-size: 8px;
  margin: 0px;
  padding: 0px;
  width: 1000px;
}

wrap,
wrap *,
p {
  border: 1px solid #ddd;
  margin: 10px;
  box-sizing: border-box;
}

wrap {
  height: 100px;
}

wrap,
container,
div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

container,
container div,
container div span {
  flex: 1 1;
  background-color: rgba(0, 0, 0, .125);
}

span,
p {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<wrap>
  <span>Flex Element Here</span>
  <container>
    <div>
      <span>A</span>
      <span>B</span>
    </div>
    <div>
      <span>C</span>
      <span>D</span>
      <span>E</span>
      <span>F</span>
      <span>G</span>
      <span>H</span>
    </div>
    <div>
      <span>I</span>
      <span>J</span>
      <span>K</span>
    </div>
  </container>
  <span>Another Flex Element Here</span>
</wrap>
<p>A-B & I-K are roomy, while C-H is cramped. Ideally, space is divided so that these letter-boxes have the same width, while being wrapped. Number of letters is dynamic, so fixed-widths cannot be used.</p>

【问题讨论】：

在这里试图找出你的目标。不清楚。如果您能找到一种方法来澄清，也许添加您想要的布局的图像，这可能会有所帮助。
很确定你需要 JS，因为你是根据孩子来设计父母的……而 CSS 做不到。

标签： html css flexbox

【解决方案1】：

首先，容器中的每个子对象都需要它们自己的弹性属性来实现您所需要的，即控制它们占用的空间。所以他们需要 ID 或类来定位他们。

<wrap>
  <span>Flex Element Here</span>
  <container>
    <div id="group1">
      <span>A</span>
      <span>B</span>
    </div>
    <div id="group2">
    ...
    <!-- and so on -->

其次，你需要分析每个组的内容，并相应地调整 CSS flex。

没有特定的语言...

如果组项目

如果 group items >= 5 然后将 css flex 设置为 "flex: 5"

否则将 css flex 设置为“flex: 2.5”

如何构成这种数字分布取决于您；这只是一个比率。为简单起见，您可以使用与组项目计数匹配的主要数字，例如如果项目数为 3，则 flex: 3。您也可以使用小数，以获得更细粒度的控制，例如两项 = “flex: 0.2”。

在任何情况下，此类处理需要在后端或前端或两者上完成，这取决于您。

对于静态页面... 在将页面发送到客户端之前，您在服务器端执行此操作，使用 PHP 或任何您的服务器语言。分析内容，并相应调整 CSS 规则。

对于动态页面... 使用 Javascript 分析内容并相应地调整 CSS。例如，如果您通过 AJAX 从服务器获取数据，则使用函数检查组中有多少项目并相应地设置新的 CSS 规则。无论如何，您可能仍然希望为初始页面加载（当用户首次加载页面时）执行此操作的服务器端功能。

如果您的内容没有动态更改，那么您真的不应该使用 Javascript 来执行此操作，因为您所做的只是让您的页面下载时间更长，并且客户端的性能更慢。

下面是代码 sn-p，每个子组都有 flex 属性。您仍然需要决定如何调整 CSS 规则。

body {
  font-family: sans-serif;
  font-size: 8px;
  margin: 0px;
  padding: 0px;
  width: 1000px;
}

wrap,
wrap *,
p {
  border: 1px solid #ddd;
  margin: 10px;
  box-sizing: border-box;
}

wrap {
  height: 100px;
}

wrap,
container,
div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

container,
container div,
container div span {
  flex: 1;
  background-color: rgba(0, 0, 0, .125);
}

#group1 {
 flex: 2; 
}

#group2 {
  flex: 5;
}

#group3 {
  flex: 3;
}

<wrap>
  <span>Flex Element Here</span>
  <container>
    <div id="group1">
      <span>A</span>
      <span>B</span>
    </div>
    <div id="group2">
      <span>C</span>
      <span>D</span>
      <span>E</span>
      <span>F</span>
      <span>G</span>
      <span>H</span>
    </div>
    <div id="group3">
      <span>I</span>
      <span>J</span>
      <span>K</span>
    </div>
  </container>
  <span>Another Flex Element Here</span>
</wrap>
<p>A-B & I-K are roomy, while C-H is cramped. Ideally, space is divided so that these letter-boxes have the same width, while being wrapped. Number of letters is dynamic, so fixed-widths cannot be used.</p>

【讨论】：

【解决方案2】：

不可能得到与flex-grow 完全相同的列，因为它是指向剩余空间的链接，而不是宽度。 CSS Tricks has a good explanation here. 也就是说，如果你想要大致的列，你可以像这样使用 flex-grow：

您需要以某种方式在弹性容器上设置 flex-grow。
为了尽量减少对此的烦恼，请创建一些类助手。.has-2-items {flex-grow: 2} 并将其放置在容器上。
项目上的Margin: auto; 应确保适当的间距。

我知道以精确方式执行此操作的唯一方法是使用显式宽度或将子项放在同一个容器中。

JSFiddle Example

【讨论】：