使用 flexbox CSS 的左列和堆叠的右列 [重复]
Posted
技术标签:
【中文标题】使用 flexbox CSS 的左列和堆叠的右列 [重复]【英文标题】：Left column and stacked right column using flexbox CSS [duplicate] 【发布时间】：2021-10-30 05:09:59 【问题描述】：在大屏幕上，我希望左侧有一列，右侧另一列有 2 个堆叠的框。
在小屏幕上，这些列应堆叠成一列。但是，框的顺序应该是 2,1,3。
这是一个插图：
我已经用flex-direction: column 和flex-wrap: wrap 设置了flex 容器，并将框1 设置为flex-basis: 100%，但这不会使后两个项目换行到下一列。
在flexbox中如何实现这种布局？
这是我目前所处位置的演示：
.container
display: flex;
flex-direction: column;
flex-wrap: wrap;
.cell
background: #ccc;
border: solid 3px black;
width: 50%;
.cell-1
flex-basis: 100%;
@media (max-width: 500px)
.cell
width: 100%;
.cell-1
order: 2;
.cell-2
order: 1;
.cell-3
order: 3;
<h1>Vertical Boxes</h1>
<p>Goal: Have one box on the left, and two boxes on the right that are stacked. All without nesting, so that the order of the boxes can be changed on smaller screen sizes.</p>
<div class="container">
<div class="cell cell-1">
<h2>One</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure.
</div>
<div class="cell cell-2">
<h2>Two</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste mollitia temporibus id sint illum doloremque pariatur nulla vel soluta, nostrum vitae, suscipit ea natus sed eaque in velit deserunt deleniti!
</div>
<div class="cell cell-3">
<h2>Three</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, architecto perferendis voluptatum accusantium est ipsam fugit, laudantium fugiat nostrum consectetur earum. Asperiores, similique deleniti nobis nemo error, iste iure architecto.
</div>
</div>http://codepen.io/dloewen/pen/qOzogG
【问题讨论】：
有一位名叫 philip walton 的绝对圣人，他为一大堆经典设计挑战提出了解决方案，这些挑战被 flexbox 大大简化了philipwalton.github.io/solved-by-flexbox/demos/grids 【参考方案1】：首先我们创建一个容器.Box 并设置宽度和高度。老实说，这只是为了演示，我设置了 80vw 和 80vh。并且该容器应该是列方向flex-flow: column wrap; 的flex 元素。我们将最大块 (.BoxItem--large max-width: 80%; height: 100%; ) 的最大宽度设置为父母高度的 100%。它用于将其他元素包装在新行/列上。所以来自另一列的元素应该填满所有空间，所以我们设置.BoxItem--small max-width: 20%; height: auto; - 是的，80% + 20% == 100%，这就是数学。让我们改变低宽度屏幕上的行为。 @media screen and (max-width: 600px) .Box flex-flow: column nowrap; 我们不需要包装元素，所以只需改变它。之后我们希望每个BoxItem 元素都继承父元素的宽度。 .BoxItem width: 100%; max-width: 100%; max-width: 100%; 对于级联，我们不想关心一些旧规则，例如 .BoxItem--large max-width: 80%; 和 .BoxItem--small max-width: 20%; 。并设置一些顺序更改。
*,
*:before,
*:after
box-sizing: inherit;
html
box-sizing: border-box;
html,
body
height: 100%;
margin: 0;
padding: 0;
body
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #F72F4E;
overflow: hidden;
.Box
width: 80vw;
height: 80vh;
background-color: rgba(0,0,0,.2);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: column wrap;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
-webkit-box-align: baseline;
-webkit-align-items: baseline;
-ms-flex-align: baseline;
align-items: baseline;
.BoxItem
background-color: #fff;
border: 1px solid #000;
.BoxItem--large
max-width: 80%;
height: 100%;
.BoxItem--small
max-width: 20%;
height: auto;
@media screen and (max-width: 600px)
.Box
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
.BoxItem
width: 100%;
max-width: 100%;
.BoxItem--large
height: auto;
.BoxItem--1
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
.BoxItem--2
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
.BoxItem--3
-webkit-box-ordinal-group: 4;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
<div class="Box">
<div class="BoxItem BoxItem--large BoxItem--1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto omnis rerum ea assumenda velit. Dolores ea unde iste esse illo sit, repellat molestias deleniti, voluptas expedita commodi odio possimus amet?</div>
<div class="BoxItem BoxItem--small BoxItem--2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto omnis rerum ea assumenda velit.</div>
<div class="BoxItem BoxItem--small BoxItem--3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto omnis rerum ea assumenda velit.</div>
</div>【讨论】：
谢谢，不过有一个简单的解释会有所帮助。似乎使用与其他答案相同的技术。 @dloewen 首先我们创建一个容器.Box 并设置宽度和高度。老实说，这只是为了演示，我设置了80vw 和80vh。并且该容器应该是列方向flex-flow: column wrap 的flex 元素；我们设置最大块的最大宽度 (.BoxItem--large max-width: 80%; height: 100%; ) 和父母高度的 100%。它用于在新行/列上包装其他元素。所以来自另一列的元素应该填满所有空间，所以我们设置.BoxItem--small max-width: 20%; height: auto; - 是的，80% + 20% == 100%，这就是数学运算。
@dloewen 好的。让我们改变低宽度屏幕上的行为。 @media screen and (max-width: 600px) .Box flex-flow: column nowrap; 我们不需要包装元素，所以只需改变它。之后，我们希望每个 BoxItem 元素都继承父宽度。 .BoxItem width: 100%; max-width: 100%; 。 max-width: 100%; 用于级联，我们不想关心一些旧规则，例如 .BoxItem--large max-width: 80%; 和 .BoxItem--small max-width: 20%; 。并设置一些顺序更改。就是它。
以上解释是答案的关键组成部分，作为答案的一部分会更有帮助，更容易阅读。评论部分通常是为小问题保留的。
@Michael_B 明白了，谢谢。更新了答案。【参考方案2】：
看起来你快到了。只需再执行两个步骤：
-
定义弹性容器的高度
如果没有定义高度，一些浏览器可能不知道在哪里换行。试试这个：
.container
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 500px; /* new; value just for demo purposes */
-
在移动视图上关闭换行
@media (max-width: 500px)
.container flex-wrap: nowrap; /* new */
.cell width: 100%;
.cell-1 order: 2;
.cell-2 order: 1;
.cell-3 order: 3;
.container
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 500px;
.cell
background: #ccc;
border: solid 3px black;
width: 50%;
.cell-1
flex-basis: 100%;
@media (max-width: 500px)
.container
flex-wrap: nowrap;
.cell
width: 100%;
.cell-1
order: 2;
.cell-2
order: 1;
.cell-3
order: 3;
<h1>Vertical Boxes</h1>
<p>Goal: Have one box on the left, and two boxes on the right that are stacked. All without nesting, so that the order of the boxes can be changed on smaller screen sizes.</p>
<div class="container">
<div class="cell cell-1">
<h2>One</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure.
</div>
<div class="cell cell-2">
<h2>Two</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste mollitia temporibus id sint illum doloremque pariatur nulla vel soluta, nostrum vitae, suscipit ea natus sed eaque in velit deserunt deleniti!
</div>
<div class="cell cell-3">
<h2>Three</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, architecto perferendis voluptatum accusantium est ipsam fugit, laudantium fugiat nostrum consectetur earum. Asperiores, similique deleniti nobis nemo error, iste iure architecto.
</div>
</div>revised codepen
【讨论】：
啊，有道理。唯一的问题是左列可以有任何高度，所以我必须用 javascript 计算并强制它的高度。 如果没有height: 500px;，这将如何工作？删除它似乎会破坏布局。
@Andrew，如果你不给容器一个固定的高度，物品怎么知道在哪里包装？他们只会在单个列中继续扩展容器。
感谢@Michael_B，对于许多希望在此布局中使用 flex-box 的人来说，固定高度将是一个交易破坏者，这可以通过其他方法（例如浮动）轻松实现，而无需强制固定高度。
@bloodwithmilk，查看CSS Grid。以上是关于使用 flexbox CSS 的左列和堆叠的右列 [重复]的主要内容，如果未能解决你的问题，请参考以下文章