html – 某些项目沿着交叉轴在仅使用CSS的flex布局的行列内堆叠

概述有一次,我为此提出了一个CSS规范建议,但后来我认为可能已经有了一个我缺少的解决方案.我正在谈论的那种布局的一个例子看起来像这样： +-----------+---+| 1 | 6 |+---+---+---+ || 2 | 3 | 4 +---++---+---+---+ 7 || 5 | |+-----------+---+ 问题是左列中间的 有一次,我为此提出了一个CSS规范建议,但后来我认为可能已经有了一个我缺少的解决方案.我正在谈论的那种布局的一个例子看起来像这样：

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

问题是左列中间的那三个框沿着十字轴堆叠,我在CSS中找不到一个机制来执行此 *** 作.我知道这可以通过包裹这三个项目的div来完成,这三个项目是行方向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;}

解决方法 使用多个flex容器会更容易.

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

> 6和7的宽度是已知的
> 2,3和4的高度是已知的

然后你可以

>使用行布局

┌─┬─┬─┬─┬─┬─┬─┐│1│2│3│4│5│6│7│└─┴─┴─┴─┴─┴─┴─┘

>重新排序d性项目：1,6,2,3,4,5,7

┌─┬─┬─┬─┬─┬─┬─┐│1│6│2│3│4│5│7│└─┴─┴─┴─┴─┴─┴─┘

>使用flex-wrap：换行允许换行.
>使用伪元素在2之前和之后强制换行

┌─┬─┐│1│6│├─┼─┼─┐│2│3│4│├─┼─┼─┘│5│7│└─┴─┘

>使用flex-grow：在6和7上使用0.在其他上使用flex-grow：1.

┌─────────┬─┐│    1    │6│├───┬───┬─┴─┤│ 2 │ 3 │ 4 │├───┴───┴─┬─┤│    5    │7│└─────────┴─┘

>将所需的w设置为6和7.将margin-right：w添加到4

┌─────┬───┐│  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,4可能是个好主意.否则,如果它们的内容足够宽,它们将被放置在不同的行中,从而打破了布局.

这是代码：

#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,#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>

总结

以上是内存溢出为你收集整理的html – 某些项目沿着交叉轴在仅使用CSS的flex布局的行/列内堆叠全部内容，希望文章能够帮你解决html – 某些项目沿着交叉轴在仅使用CSS的flex布局的行/列内堆叠所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。