代码之家 › 专栏 › 技术社区 › Nikita Tonkoskur

Flexbox一长一短列

flexbox css3 css html

2

Nikita Tonkoskur · 技术社区 · 7 年前

我试图实现这样的布局:

以下是我目前的代码:

.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 高度 属于 500px 这会导致页脚离 (续) . 或者如果我有很多内容和一个 height: 500px ,它将导致内部内容 (续) 在页脚下。你有什么建议来解决这个问题?

codepen

1 回复 | 直到 7 年前

1

3

tao 7 年前

您可以使用网格“轻松”实现:

.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>