Question

我尝试使用引导程序，但无法解决此问题：

http://clubcanindelestrie.com/images/layouts.png

我认为flexbox可以完成这项工作，但无法解决。请帮忙！

Answer 1

您可以使用 Flexbox或CSS Grid来实现此布局，IMO，Grid会更好，因为您只需要管理一个包含其项目的容器，而不是使用两个单独的flex-item管理它们内容。

还可以使用Grid相当容易地更改所有项目的位置。看看下面的两个例子。

Flexbox

.flex,
.wrapper1,
.wrapper2 {
  display: flex;
}

.flex .wrap {
  flex: 1 0 50%;
}

.item {
  min-height: 100px;
  flex: 1 0 50%;
}

.wrapper1 {
  flex-direction: column;
}

.wrapper1 .flex-item-2 {
  display: none;
}

.wrapper2 .flex-item-2 {
  max-width: 100%;
}

.flex-item-3 {
  position: relative;
}

.flex-item-3 p {
  margin: 0;
  position: absolute;
  bottom: 0;
}


/* Just coloring */

.flex-item-1 {
  background-color: red
}

.flex-item-2 {
  background-color: skyblue
}

.flex-item-3 {
  background-color: yellow;
  overflow-y: auto;
}

@media (max-width: 590px) {
  .flex {
    flex-direction: column;
  }
  .wrapper1 .flex-item-2 {
    display: block;
  }
  .wrapper2 .flex-item-2 {
    display: none;
  }
}

<div class="flex">
  <div class="wrap wrapper1">
    <div class="item flex-item-1">1</div>
    <div class="item flex-item-2">2</div>
    <div class="item flex-item-3">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
      </p>
    </div>
  </div>
  <div class="wrap wrapper2">
    <div class="item flex-item-2">
    </div>
  </div>
</div>

CSS网格

使用CSS Grid，您可以拥有一个包含其项目的容器，可以用多种方式排列该容器，以所需的任何方式放置元素，以及使每个元素使用所需的空间。（考虑阅读this article）

在以下示例中，您需要查看的最重要的规则是：

display: grid;：我们定义哪个将成为Grid容器。

grid-template-rows: repeat(2, 100px);：我们定义了网格中要包含的行数，可以通过多种方式自定义，但是在示例中，我们使用repeat()函数定义2行，每行高度100px。

grid-template-columns: repeat(2, 1fr);：与行相同，我们定义需要2列，每列将使用可用空间的 1分之一；这样，每个列基本上都使用屏幕的50％。

grid-template-areas: "item1 item2" "item3 item2";：使用模板区域，我们可以构建类似于可视化外观的网格外观。每个组字符串（""）代表一行，您为应该占据该列空间的项目指定一个名称，因此"item1 item2"告诉网格在一行中，第一列应由网格使用。元素为item1 grid-area，第二列为元素为item2；

您拥有一个，您只需定义哪个项目是item1和哪个item2（或item3或4，5，...等）。执行此操作的另一种方法是使用属性grid-column或grid-row定义元素应从哪个 grid-line 渲染到哪个网格，并输出相同的最终结果。

.grid {
  display: grid;
  grid-template-rows: repeat(2, 100px);
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "item1 item2" "item3 item2";
}

.grid-item-1 {
  grid-area: item1;
  background-color: red;
}

.grid-item-2 {
  grid-area: item2;
  background-color: skyblue;
}

.grid-item-3 {
  grid-area: item3;
  background-color: yellow;
  /*You can also mix both approaches*/
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.grid-item-3 p{
  margin: 0;
}

@media (max-width: 590px) {
  .grid {
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: 1fr;
    grid-template-areas: "item1" "item2" "item3";
  }
}

<div class="grid">
  <div class="item grid-item-1">1</div>
  <div class="item grid-item-2">2</div>
  <div class="item grid-item-3">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    </p>
  </div>
</div>

这是您在注释部分提供的代码，其中已进行了修复：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  padding: 10px;
}

.grid-container>div {
  padding: 20px 0;
  border: 1px solid black;
}

.item2 {
  grid-row: span 2;
}

.item3 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
</div>

如何解决这种复杂的布局？

1 个答案: