Question

我正在尝试实现此定位概述的以下方案的弹性框

+----+----------+----+
|   1|2>        |  <3|
+----+----------+----+
|   4|5              |
|   v|v              |
+----+               |
     |               |
+----+------+--------+
|7>         |      <6|
+-----------+--------+

说明

上面的每个弹性项目都有其订单号
根据最终结果（垂直和水平）对齐数字
具有数字的项目仅具有预定义的宽度
<>v根据内容的数量显示商品的尺寸灵活性;
- >内容将向右延伸
- <内容将向左延伸
- v内容将延伸
1具有固定的宽度和高度
1,2＆amp; 3具有相同的高度但2＆amp; 3具有可变宽度
4＆amp; 5具有定义的宽度但不同的高度
6＆amp; 7具有相同的高度但宽度不同
项目编号对应于它们在HTML中的位置
请注意，与HTML

问题

主要问题是所有项目都在同一个flex容器中。因此，我有问题在正确的点包装它们（打破线），即项目应该在第3项之后换行，而第2和第3项必须在整条线上伸展，因此第3项可以完全显示内容本身的内容。 / p>

Here a working JSFiddle包含您可以处理的初始HTML和CSS。

一些想法

也许只是为了让我想到的想法。可以使用:before和:after并在适当的顺序下在flexbox容器中使用另外两个项目。这样就可以模拟一些额外的内容以获得所需的结果。

如果有弹性组，则会更容易，因为可以将flex-direction更改为column并将多个项目组合在一起：1＆amp; 4＆amp; 3,4＆amp; 5和6＆amp; 7并定位它们在row内的flex组中，宽度适当。

Answer 1

我使用flex-basis设法达到了预期的效果。当项目1,2,3和4都具有26％的基础时，第4项不再适合第一行。同样的事情可以应用于第二行。

然后flex-grow可以应用于第2,3,5,6和7项，以填充每行中的剩余空间。

最后align-self第4项，所以它与第5项的高度不同。

更新了JSFiddle：http://jsfiddle.net/ojmghu3t/2/

更新：当然，您也可以使用px指定flex-basis。但是，在正确的位置上制造休息更难。

以下是具有第1项和第4项固定值的JSFiddle：http://jsfiddle.net/ojmghu3t/4/

Answer 2

实际上，您可以使用伪元素来实现此目的：

main::before, main::after {
    content: '';        /* Enable pseudo-elements */
    margin-right: 100%; /* Force line break */
}
main::before {
    order: 4;           /* Place it before .i4 */
}
main::after {
    order: 5;           /* Place it after .i5 */
}

main {
  width: 200px;
  display: flex;
  flex-flow: row wrap;
  border: 1px solid #ccc;
  resize: horizontal;
  overflow: auto;
}
main::before, main::after {
  content: '';
  margin-right: 100%;
}
main::before {
  order: 4;
}
main::after {
  order: 5;
}
.i2, .i3, .i5, .i6, .i7 {
  flex-grow: 1;
}
.i5 {
  width: 0;
}
section {
  border: 1px solid #eee;
}
.i1, .i4 {
  width: 50px;
  text-align: right;
}
.i7 {
  text-align: right;
  order: 6;
}
.i1 { order: 1; }
.i2 { order: 2; }
.i3 { order: 3; }
.i4 { order: 4; }
.i5 { order: 5; }
.i6 { order: 7; }
.i7 { order: 6; }

<main>
  <section class="i1">1</section>
  <section class="i2">2</section>
  <section class="i3">3</section>
  <section class="i4">4</section>
  <section class="i5">This one has much more content than the rest.</section>
  <section class="i6">6</section>
  <section class="i7">7</section>
</main>

Answer 3

解决方案

这个解决方案我现在想出了@Jan's answer的一些想法，并意识到支持flexbox的所有浏览器也支持calc CSS功能。基于此，我能够使弹性箱容器具有灵活性，并使物品在我需要的位置保持休息状态。

Jan的答案解决了我的布局，假设所有项目宽度都相对于容器，但是项目＃1和＃3具有固定的宽度。所有其他的都根据布局灵活。

我只是在灵活容器上添加定义弹性项目宽度的最重要的CSS。我将.itemX称为弹性项 X 的选择器，其中 X 是元素编号。所以这些选择器只是伪代码，以便于理解。相应调整：

.itemAll {
    flex-grow: 1;
}

.item1,
.item4 {
    flex-grow: 0;
    flex-basis: @FixedWidth; /* i.e. 25px */
}

.item2,
.item3 {
    flex-basis: calc((100% - @FixedWidth)/2);
}

.item5 {
    flex-basis: calc(100% - @FixedWidth);
}

.item6,
.item7 {
    flex-basis: 50%;
}

正如我们从修改过的JSFiddle example中看到的那样，这确实有效。尝试调整结果面板宽度的大小，您将看到除＃1和＃4之外的所有弹性项目都根据容器调整其宽度，并始终按照定义保持其布局。

CSS flexbox包含单个容器和不同大小的项目

说明

问题

一些想法

3 个答案:

解决方案