使用 flexbox CSS 的左列和堆叠的右列 [英] Left column and stacked right column using flexbox CSS

查看：24
本文介绍了使用 flexbox CSS 的左列和堆叠的右列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在大屏幕上，我希望左边有一列，右边有一列有 2 个堆叠的框.

在小屏幕上，这些列应该堆叠成一列.但是，盒子的顺序应该是2,1,3.

这是一个说明:

我已经将 flex 容器设置为 flex-direction: column 和 flex-wrap: wrap，并将框 1 设置为 flex-basis: 100%，但这不会使后两个项目换行到下一列.

这个布局如何在 flexbox 中实现?

这是我目前所处位置的演示:

.container {显示:弹性；弹性方向:列；flex-wrap: 包裹;}.细胞 {背景:#ccc;边框:纯 3px 黑色；宽度:50%；}.cell-1 {弹性基础:100%；}@media(最大宽度:500px){.细胞 {宽度:100%；}.cell-1 {订单:2；}.cell-2 {订单:1；}.cell-3 {订单:3；}}

垂直框
<p>目标:左边有一个盒子，右边有两个堆叠的盒子.所有都没有嵌套，因此可以在较小的屏幕尺寸上更改框的顺序.</p><div class="容器"><div class="cell cell-1"><h2>一个</h2>Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Iusto pariatur rerum、illum accusantium cupiditate ipsam、eaque quae fugit cumassistantda ad.莫迪，例外.Assumenda，nobis，consequatur?Aliquid repelendus quis, iure.Lorem ipsum dolor 坐amet, consectetur adipisicing 精英.Iusto pariatur rerum、illum accusantium cupiditate ipsam、eaque quae fugit cumassistantda ad.莫迪，例外.Assumenda，nobis，consequatur?Aliquid repelendus quis, iure.Lorem ipsum dolor 坐 amet, consectetur吸脂精英.Iusto pariatur rerum、illum accusantium cupiditate ipsam、eaque quae fugit cumassistantda ad.莫迪，例外.Assumenda，nobis，consequatur?Aliquid repelendus quis, iure.Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Iusto pariatur rerum、illum accusantium cupiditate ipsam、eaque quae fugit cumassistantda ad.莫迪，例外.Assumenda，nobis，consequatur?Aliquid repelendus quis, iure.

<div class="cell cell-2"><h2>两个</h2>Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Iste mollitia temporibus id sintillum doloremque pariatur nulla vel soluta, nostrum vitae, suscipit ea natus sed eaque in velit deserunt deleniti！

<div class="cell cell-3"><h2>三</h2>Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Impedit，architecto perferendis voluptatum accusantium est ipsam fugit，laudantium fugiat nostrum consectetur earum.Asperiores, similique deleniti nobis nemo error, iste iure architecto.

http://codepen.io/dloewen/pen/qOzogG

解决方案

看来您已经快到了.只需再执行两步:

  1. 定义弹性容器的高度

如果没有定义的高度，一些浏览器可能不知道在哪里换行.试试这个:

.container {显示:弹性；弹性方向:列；flex-wrap: 包裹;高度:500px；/* 新的;值仅用于演示目的 */}

  1. 在移动视图中关闭换行

@media (max-width: 500px) {.container { flex-wrap: nowrap;}/* 新的 */.cell { 宽度:100%;}.cell-1 { 顺序:2;}.cell-2 { 顺序:1;}.cell-3 { 顺序:3;}}

.container {显示:弹性；弹性方向:列；flex-wrap: 包裹;高度:500px；}.细胞 {背景:#ccc;边框:纯 3px 黑色；宽度:50%；}.cell-1 {弹性基础:100%；}@media(最大宽度:500px){.容器 {flex-wrap: nowrap;}.细胞 {宽度:100%；}.cell-1 {订单:2；}.cell-2 {订单:1；}.cell-3 {订单:3；}}

垂直框
<p>目标:左边有一个盒子，右边有两个堆叠的盒子.所有都没有嵌套，因此可以在较小的屏幕尺寸上更改框的顺序.</p><div class="容器"><div class="cell cell-1"><h2>一个</h2>Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Iusto pariatur rerum、illum accusantium cupiditate ipsam、eaque quae fugit cumassistantda ad.莫迪，例外.Assumenda，nobis，consequatur?Aliquid repelendus quis, iure.Lorem ipsum dolor 坐amet, consectetur adipisicing 精英.Iusto pariatur rerum、illum accusantium cupiditate ipsam、eaque quae fugit cumassistantda ad.莫迪，例外.Assumenda，nobis，consequatur?Aliquid repelendus quis, iure.Lorem ipsum dolor 坐 amet, consectetur吸脂精英.Iusto pariatur rerum、illum accusantium cupiditate ipsam、eaque quae fugit cumassistantda ad.莫迪，例外.Assumenda，nobis，consequatur?Aliquid repelendus quis, iure.Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Iusto pariatur rerum、illum accusantium cupiditate ipsam、eaque quae fugit cumassistantda ad.莫迪，例外.Assumenda，nobis，consequatur?Aliquid repelendus quis, iure.

<div class="cell cell-2"><h2>两个</h2>Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Iste mollitia temporibus id sintillum doloremque pariatur nulla vel soluta, nostrum vitae, suscipit ea natus sed eaque in velit deserunt deleniti！

<div class="cell cell-3"><h2>三</h2>Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Impedit，architecto perferendis voluptatum accusantium est ipsam fugit，laudantium fugiat nostrum consectetur earum.Asperiores, similique deleniti nobis nemo error, iste iure architecto.

修改代码笔

On large screens, I'd like to have a column on the left, and another column on the right that has 2 stacked boxes.

On small screens, these columns should stack into a single column. However, the order of the boxes should be 2,1,3.

Here is an illustration:

I've set the flex container with flex-direction: column and flex-wrap: wrap, and box 1 to flex-basis: 100%, but that doesn't make the second two items wrap to the next column.

How can this layout be achieved in flexbox?

Here is a demo of where I'm at so far:

.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

解决方案

It looks like you were almost there. Just two more steps:

  1. Define a height for the flex container

Without a defined height some browsers may not know where to wrap. Try this:

.container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 500px; /* new; value just for demo purposes */
}

  1. Turn off wrap on mobile view

@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

这篇关于使用 flexbox CSS 的左列和堆叠的右列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆