在仅使用 CSS 的 flex 布局的行/列中沿横轴堆叠某些项目 [英] Have certain items stack along the cross axis within a row/column of a flex layout with only CSS

问题描述

有一次我正在为此考虑 CSS 规范建议，但后来我想可能已经有一个我缺少的解决方案.我正在谈论的布局类型的示例如下所示:

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

问题是左列中间的那三个框是沿横轴堆叠的，我在CSS中找不到这样做的机制.我知道这可以用围绕行方向 flex 布局的 3 个项目的 div 来完成，但这种方法破坏了 flex 布局的灵活性，因为这些项目不能再围绕外部布局和列重新排序/他们之间不再发生行中断.那么，如何仅使用 CSS 来实现这一点，从而使 flex 布局保持可伸缩?

HTML:

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

CSS:

#flex-layout {显示:弹性；弹性方向:列；高度:300px；宽度:400px；flex-wrap: 包裹;对齐项目:拉伸；}#it​​em1 {弹性:0 0 100px；宽度:300px；}#it​​em2 {弹性:0 0 100px；宽度:100px；}#it​​em3 {弹性:0 0 100px；宽度:100px；}#it​​em4 {弹性:0 0 100px；宽度:100px；}#it​​em5 {弹性:0 0 100px；}#it​​em6 {弹性:0 0 150px；宽度:100px；}#it​​em7 {弹性:0 0 150px；}

解决方案

如果现在有人碰巧遇到这种情况，实现这种布局的一种不那么黑客的方式是更新的网格布局系统.网格更适合这种布局，而 flex 更适合将项目分布在单行/列中(包括垂直居中元素之类的东西)，或者当项目沿 flex 轴的大小不一致并在多个项目中相互对齐时行/列不是问题.

#grid-layout {显示:网格；网格间隙:1em；/* 4 列，每列 25% 宽度 - 网格间隙的 3/4 个 em */网格模板列:repeat(4, calc(25% - (3em/4)));网格模板行:10em 4.5em 4.5em 10em；}#grid-layout >div {边框:纯 1px 黑色；填充:.5em；}#it​​em1 { 网格区域:1/1/跨度 1/跨度 3;}#it​​em2 { 网格区域:2/1/跨度 2/跨度 1;}#it​​em3 { 网格区域:2/2/跨度 2/跨度 1;}#it​​em4 { 网格区域:2/3/跨度 2/跨度 1;}#it​​em5 { 网格区域:4/1/跨度 1/跨度 3;}#it​​em6 { 网格区域:1/4/跨度 2/跨度 1;}#it​​em7 { 网格区域:3/4/跨度 2/跨度 1;}

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

At one point I was toying with a CSS spec suggestion for this, but then I figured there is probably already a solution that I am missing. An example of the kind of layout I'm talking about would look something like this:

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

The problem is those three boxes in the middle of the left column are stacked along the cross axis, and I can't find a mechanism in CSS to do this. I know this could be done with a div wrapped around those 3 items that is a row direction flex layout, but that approach breaks the flexibility of a flex layout because those items can no longer be re-ordered around the outer layout and a column/row break can no longer happen between them. So, how can this be achieved this with only CSS, so that the flex layout stays flexable?

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;
}

解决方案

In case anyone happens to come across this now a days, a less hack-ish way to achieve this sort of layout is the newer grid layout system. Grids are more designed for this kind of layout while flex is more suited for distributing items in a single row/column (including things like vertically centering elements) or when items are inconsistent sizes along the flex axis and lining them up with each other across multiple rows/columns isn't a concern.

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

这篇关于在仅使用 CSS 的 flex 布局的行/列中沿横轴堆叠某些项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！