使用 Flexbox 和其他 div 进行 CSS 格式化

Question

我正在尝试使用 CSS 格式化网页，使其看起来像这样：

这个想法是页面响应如下；红色和蓝色列（左和右）应各自具有设定的宽度。中心列将是可折叠的（它内部包含一系列大小一致的方形 div，并且应该是一个具有以下功能的弹性盒：

flex-direction: row;
flex-wrap: wrap;
max-width: 962px;

我已经尝试了多种配置，最好的配置是三个 div 是内联的，但蓝色的 div 与黄色的 Flexbox 重叠，而不是强制它折叠和换行。

有人可以告诉我什么显示/位置/等吗？我应该在这里使用 CSS 属性吗？

我们可以只使用.red、.yellow、.blue 来描述，请。

谢谢！

Answer 1

嗨，

不幸的是你还没有放置你的源代码，所以我没有看到你的问题，但我认为你错过了 Flexbox 布局的基础，即项目（你的 div）的

container

然后你可以设置布局。

---

解决方案

您的 3 个 div 应该位于一个容器中。容器定义了 Flex 布局及其行为。正如您在上面所写的，外部 div (

.red

和

.blue

) 设置了静态宽度，中间 div (

.yellow

) 具有属性

flex: auto

，与容器中的宽度相匹配。

下面是我的解决方案的代码片段。

div {
  border: 2px solid black;
  padding: 5px;
}

#container {
  display: flex;
}

.red {
  border-color: red;
  width: 100px
}

.yellow {
  border-color: yellow;
  margin: 0px 5px;
  flex: auto;
}

.blue {
  border-color: blue;
  width: 100px
}

<div id="container">
  <div class="red">Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. </div>
  <div class="yellow">Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. </div>
  <div class="blue">Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki.</div>
</div>

---

知识

您可以在此处阅读有关 Flexbox 布局的更多信息。

---

干杯