在只有CSS的flex布局的行/列中沿交叉轴设置某些项堆栈

Question

有一段时间，我在玩CSS规范的建议，但后来我发现可能已经有一个解决方案，我错过了。我所说的布局的一个例子是这样的：

+-----------+---+
|     1     | 6 |
+---+---+---+   |
| 2 | 3 | 4 +---+
+---+---+---+ 7 |
|     5     |   |
+-----------+---+

问题是，左边列中间的三个框是沿着交叉轴堆叠的，我在CSS中找不到这样做的机制。我知道这可以用一个div包装在这3项上，即行方向flex布局，但这种方法破坏了flex布局的灵活性，因为这些项目不能再围绕外部布局重新排序，并且不能再在它们之间发生列/行中断。那么，如何通过只使用CSS来实现这一点，从而使flex布局保持灵活？

HTML：

<div id="flex-layout">
<div id="item1">1</div>
<div id="item2">2</div>
<div id="item3">3</div>
<div id="item4">4</div>
<div id="item5">5</div>
<div id="item6">6</div>
<div id="item7">7</div>
</div>

CSS：

#flex-layout {
    display: flex;
    flex-direction: column;
    height: 300px;
    width: 400px;
    flex-wrap: wrap;
    align-items: stretch;
}

#item1 {
    flex: 0 0 100px;
    width: 300px;
}

#item2 {
    flex: 0 0 100px;
    width: 100px;
}

#item3 {
    flex: 0 0 100px;
    width: 100px;
}

#item4 {
    flex: 0 0 100px;
    width: 100px;
}

#item5 {
    flex: 0 0 100px;
}

#item6 {
    flex: 0 0 150px;
    width: 100px;
}

#item7 {
    flex: 0 0 150px;
}

Answer 1

如果现在有人碰巧遇到这种情况，一种不那么简单的方式来实现这种布局，那就是更新的网格布局系统。网格更适合于这种布局，而flex更适合在单个行/列(包括垂直对中元素)中分配项，或者当项目沿弯曲轴大小不一致时，并在多个行/列之间彼此排列，这并不重要。

​

#grid-layout {
    display: grid;
    grid-gap: 1em;
    /* 4 columns each 25% width - 3/4 of an em for the grid-gap */
    grid-template-columns: repeat(4, calc(25% - (3em / 4))); 
    grid-template-rows: 10em 4.5em 4.5em 10em;
}

#grid-layout > div {
    border: solid 1px black;
    padding: .5em;
}

#item1 { grid-area: 1 / 1 / span 1 / span 3; }
#item2 { grid-area: 2 / 1 / span 2 / span 1; }
#item3 { grid-area: 2 / 2 / span 2 / span 1; }
#item4 { grid-area: 2 / 3 / span 2 / span 1; }
#item5 { grid-area: 4 / 1 / span 1 / span 3; }
#item6 { grid-area: 1 / 4 / span 2 / span 1; }
#item7 { grid-area: 3 / 4 / span 2 / span 1; }

<div id="grid-layout">
    <div id="item1">1</div>
    <div id="item2">2</div>
    <div id="item3">3</div>
    <div id="item4">4</div>
    <div id="item5">5</div>
    <div id="item6">6</div>
    <div id="item7">7</div>
</div>

​

Answer 2

使用多个flex容器会更容易。

但是，如果你想要一个容器，你仍然可以这样做，假设如下：

• 已知6和7的宽度。
• 已知2、3和4的高度。

然后，你可以

• 使用行布局 ┌─┬─┬─┬─┬─┬─┬─┐│1│2│3│4│5│6│7│└─┴─┴─┴─┴─┴─┴─┘
• 重新订购灵活物品: 1,6,2,3,4,5,7 ┌─┬─┬─┬─┬─┬─┬─┐│1│6│2│3│4│5│7│└─┴─┴─┴─┴─┴─┴─┘
• 允许用flex-wrap: wrap中断行。
• 使用伪元素强制在2之前和4之后中断行。 ┌─┬─┐│1│6│├─┼─┼─┐│2│3│4│├─┼─┼─┘│5│7│└─┴─┘
• 在6和7上使用flex-grow: 0，对其他的使用flex-grow: 1。 ┌─────────┬─┐│1│6│├───┬───┬─┴─┤│2│3│4│├───┴───┴─┬─┤│5│7│└─────────┴─┘
• 将所需的with，w设置为6和7。 ┌─────┬───┐│1│6│├─┬─┬─┼───┘│2│3│4│├─┴─┴─┼───┐│5│7│└─────┴───┘
• 将所需的高度( h )设置为2、3和4。将margin-bottom: -h/2添加到6，将margin-top: -h/2添加到7。 ┌─────┬───┐│1│6│├─┬─┬─┤││2│3│4├───┤├─┴─┴─┤7││5││└─────┴───┘
• 另外，在2,3,4中添加一个width或max-width可能是个好主意。否则，如果它们的内容足够宽，它们将被放置在不同的行中，从而破坏布局。

以下是代码：

​

#flex-layout {
  display: flex; /* Magic begins */
  flex-wrap: wrap; /* Multiline */
}
#item1 { order: 1; }
#item6 { order: 2; }
#item2 { order: 3; }
#item3 { order: 4; }
#item4 { order: 5; }
#item5 { order: 6; }
#item7 { order: 7; }
#flex-layout > div {
  border: 1px solid;
  box-sizing: border-box;
}
#item2, #item3, #item4 {
  height: 50px; /* h */
}
#item6 {
  margin-bottom: -25px; /* -h/2 */
}
#item7 {
  margin-top: -25px; /* -h/2 */
}
#item1, #item2, #item3, #item4, #item5 {
  flex-grow: 1;
}
#item6, #item7 {
  width: 25%; /* w */
  flex-grow: 0;
}
#item4 {
  margin-right: 25%; /* w */
}
#flex-layout:before {
  /* Force line break before #item2 */
  content: '';
  width: 100%;
  order: 3;
}
#flex-layout:after {
  /* Force line break after #item4 */
  content: '';
  width: 100%;
  order: 5;
}

<div id="flex-layout">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
  <div id="item7">7</div>
</div>

​

Answer 3

我的解决方案使用绝对位置。

​

#flex-layout {
  border: 4px solid tomato;  
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  position: relative;
  min-width: 200px;
}
#flex-layout div {
  box-sizing: border-box;
  border: 4px solid white;
  background: #ddd;
  padding: 1em;
  text-align: center;
  flex: 0 1 25%;
}
#flex-layout #item1 {
  flex: 0 1 75%;
  margin-right: 25%;  
}
#flex-layout #item5 {
  flex: 0 1 75%;
}
#flex-layout #item6 {
  width: 25%; height: 50%;
  position: absolute;  
  top: 0; right: 0;
}
#flex-layout #item7 {
  width: 25%; height: 50%;
  position: absolute;
  top: 50%; right: 0;
}

  <body>
    <div id="flex-layout">
      <div id="item1">1</div>
      <div id="item2">2</div>
      <div id="item3">3</div>
      <div id="item4">4</div>
      <div id="item5">5</div>
      <div id="item6">6</div>
      <div id="item7">7</div>
    </div>

​