Question

我有一个flex容器，其中包含x个元素，每个元素包含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>

Answer 1

首先，容器中的每个孩子都需要拥有自己的flex属性才能实现所需的功能，即控制他们占用的空间。因此，他们需要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。

没有特定语言...

如果组项目<= 2，则将CSS flex设置为“ flex：1”

如果组项目> = 5，则将CSS Flex设置为“ flex：5”

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

如何弥补这种数字分散取决于您自己；这只是一个比率。为简单起见，您可以使用与组项目计数匹配的主要数字，例如如果项目计数为3，则可以使用flex：3.您也可以使用小数，以实现更精细的控制，例如两项=“ flex：0.2”。

在任何情况下，都需要在后端或前端或同时在两者上进行此类处理，这取决于您。

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

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

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

下面是每个子组具有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>

Answer 2

不可能用flex-grow获得完全相等的列，因为它链接到剩余空间，而不是宽度。 CSS Tricks has a good explanation here.也就是说，如果您想要粗略的列，可以使用flex-grow这样：

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

我唯一知道的确切方法是使用显式宽度或将子代放置在同一容器中。

JSFiddle Example

Flexbox —忽略子元素的包装器

2 个答案: