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

问题描述

在大屏幕上，我想在左边有一列，右边有另一列有2个堆叠的框。

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

这是一个例证：

我已经设置flex容器与 flex-direction：column 和 flex-wrap：wrap ，框1 flex-basis：100％，但这不会使后两个项目换行到下一列。

这里是我到目前为止的演示：

.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>垂直框< / h1> < p>目标：左侧有一个框，右侧有两个堆叠的框。全部没有嵌套，以便可以在较小的屏幕尺寸上更改框的顺序。< / p>< div class =container> < div class =cell cell-1> < h2>一个< / h2> Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Iusto pariatur rerum，illum accusantium cupiditate ipsam，eaque quae fugit cum hypotenda ad。莫迪，苏里。 Assumenda，nobis，consequatur？洋葱。 Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Iusto pariatur rerum，illum accusantium cupiditate ipsam，eaque quae fugit cum hypotenda ad。 Modi，excepturi。 Assumenda，nobis，consequatur？洋葱。 Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Iusto pariatur rerum，illum accusantium cupiditate ipsam，eaque quae fugit cum hypotenda ad。 Modi，excepturi。 Assumenda，nobis，consequatur？洋葱。 Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Iusto pariatur rerum，illum accusantium cupiditate ipsam，eaque quae fugit cum hypotenda ad。 Modi，excepturi。 Assumenda，nobis，consequatur？洋葱。 < / div> < div class =cell cell-2> < h2>两个< / 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>三< / 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

解决方案

看起来你几乎在那里。只需再执行两个步骤：

1. 定义flex容器的高度

   
   
   

   没有定义的高度，一些浏览器可能不知道包装在哪里。尝试此操作：

     .container {
    display：flex; 
    flex-direction：column; 
    flex-wrap：wrap; 
    height：500px; / * new;仅用于演示目的* / 
   } 
     




2. 移动视图

     @media（max-width：500px）{
    .container { 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>垂直框< / h1> < p>目标：左侧有一个框，右侧有两个堆叠的框。全部没有嵌套，以便可以在较小的屏幕尺寸上更改框的顺序。< / p>< div class =container> < div class =cell cell-1> < h2>一个< / h2> Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Iusto pariatur rerum，illum accusantium cupiditate ipsam，eaque quae fugit cum hypotenda ad。 Modi，excepturi。 Assumenda，nobis，consequatur？洋葱。 Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Iusto pariatur rerum，illum accusantium cupiditate ipsam，eaque quae fugit cum hypotenda ad。 Modi，excepturi。 Assumenda，nobis，consequatur？洋葱。 Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Iusto pariatur rerum，illum accusantium cupiditate ipsam，eaque quae fugit cum hypotenda ad。 Modi，excepturi。 Assumenda，nobis，consequatur？洋葱。 Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Iusto pariatur rerum，illum accusantium cupiditate ipsam，eaque quae fugit cum hypotenda ad。 Modi，excepturi。 Assumenda，nobis，consequatur？洋葱。 < / div> < div class =cell cell-2> < h2>两个< / 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>三< / 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>  

修订的代码

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 */
   }
   

2. 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屋！