如何在 flexbox 中的内容旁边放置一旁？

Question

我是 web 开发的新手，我第二次尝试使用 flexbox，因为我在为网站做布局时遇到了浮动问题。 基本上，我想放在内容旁边，但试图浮动它，它就消失了。 （所有颜色仅用于识别不同的元素）。

这是我的布局想法的图像：

 *, *::after, *::before { box-sizing: border-box; } body { margin: 0; } header { display: flex; justify-content: center; align-items: center; max-width: 135em; height: 7em; background: rgb(68, 100, 155); } section { display: flex; justify-content: center; flex-direction: column; align-items: center; background: chocolate; max-width: 100em; height: 50em; } aside { display: block; background: chartreuse; float: right; max-width: 20em; height: 50em; } footer { display: flex; justify-content: center; align-items: center; background: crimson; max-width: 135em; height: 22em; }

 <header></header> <section></section> <aside></aside> <footer></footer>

Answer 1

您需要将代码包装在div中并将其设置为display: flex; 像这样：

<header></header>
<div class="flex-container">
  <section></section>
  <aside></aside>
</div>
<footer></footer>

然后在您的 CSS 中：

.flex-container {
  display: flex;
}

.flex-container section {
  flex: 1; // By your image example it looks like you want this element to stretch
}