我正在为学校开发 flex-box 响应项目。但我有问题。我第一次这样做时,代码完全一团糟,无法响应。有人可以帮我做这个布局吗?我已经砸了大约 6 个小时的头,这就是我需要做的布局。它必须是 flexbox 和响应式的:
答案 0 :(得分:0)
页眉和页脚不需要灵活。
试试:
.container {
display: flex;
}
.article1 {
flex: 2;
}
aside {
display: flex;
flex-direction: column;
flex: 1;
}
<div class="container">
<div class="article1"></div>
<aside>
<div class="menu"></div>
<div class="article2"></div>
</aside>
</div>
答案 1 :(得分:0)
<div style="display:flex; flex-direction:column; ">
<header>header</header>
<main style="display:flex;flex-direction:row;">
<div style="width:70%; height:auto;">article1</div>
<div style="width:30%;height:auto; display:flex; flex-direction:column;">
<div>menu</div>
<div>article2</div>
</div>
</main>
<footer>footer</footer>
</div>