Flexbox一长短柱

Question

我正在尝试实现这样的布局：

​

​

在一个较窄的屏幕上，它看起来如下：

​

​

到目前为止，我的代码如下：

​

.cont {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 500px;
}
.cell{
  border: 2px solid black;
}
.cell-1 {
  flex-basis: 100%;
  width: 70%;
  margin-right: 25px;
}
.cell-2,
.cell-3 {
  width: 30%;
}
@media (max-width: 1000px) {
  .cont{
    flex-wrap: nowrap;
  }
  .cell {
    width: 100%;
  }
  .cell-1, .cell-2, cell-3 {
    width: 100%;
  }
  .cell-1 {
    order: 2;
  }
  .cell-2 {
    order: 1;
  }
  .cell-3 {
    order: 3;
  }

<div class="cont">
  <div class="cell cell-1">
    <h2>One</h2>
  </div>
  <div class="cell cell-2">
    <h2>Two</h2>
  </div>
  <div class="cell cell-3">
    <h2>Three</h2>
  </div>
</div>

​

问题是，我需要将height设置为.cont，这样列才能以宽屏模式包装，而由于内容大小的变化，我无法这样做。例如，如果我在cell-1中只有两个小段落和一个height of 500px，这会导致页脚离.cont太远。或者，如果我不得不使用cell-1和height: 500px中的许多内容，就会导致.cont中的内容在页脚下面。你有什么建议来解决这个问题？

码页

Answer 1

您可以“轻松”地使用网格来实现它：

​

.cont {
  display: grid;
  grid-template: 'content side-1' 'content side-2';
  grid-template-columns: 7fr 3fr;
  grid-column-gap: 1em; 
}
.cell-1 {
  grid-area: content;
}
.cell-2 {
  grid-area: side-1;
}

.cell-3 {
  grid-area: side-2;
}
@media(max-width: 768px) {
  .cont {
    grid-template: 'side-1' 'content' 'side-2'
  }
}

<div class="cont">
       <div class="cell cell-1">
          <h2>One</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet. Viverra nibh cras pulvinar mattis nunc. Ut pharetra sit amet aliquam id diam maecenas. Nunc eget lorem dolor sed viverra. Congue quisque egestas diam in arcu cursus euismod quis. Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Quis eleifend quam adipiscing vitae proin sagittis nisl. In pellentesque massa placerat duis ultricies lacus. Curabitur vitae nunc sed velit dignissim sodales.
          <p>Congue quisque egestas diam in arcu cursus euismod quis. Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Quis eleifend quam adipiscing vitae proin sagittis nisl. In pellentesque massa placerat duis ultricies lacus. Curabitur vitae nunc sed velit dignissim sodales.

       </div>

       <div class="cell cell-2">
          <h2>Two</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet. Viverra nibh cras pulvinar mattis nunc. 


       </div>

       <div class="cell cell-3">
         <h2>Three</h2>
         <p>Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. 
       </div>
    </div>

​