html - 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以使列以宽屏模式换行，但由于内容大小可变，我不能这样做。例如，如果我只有 2 个小段落，其中cell-1一个会导致页脚距离. 或者，如果我必须在和 a中有很多内容，则会导致里面的内容在页脚下。你会建议什么来解决这个问题？height500px.contcell-1height: 500px.cont

密码笔

标签： htmlcssflexbox

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>