代码:
<!DOCTYPE html>
<html>
<head>
<style> body{margin: 0px;} body> div { display: flex; flex-flow: row wrap; } body>div>nav,header,main,main,main { border-radius: 3px;margin: 5px;padding: 10px; } body>div>nav {order:2;height:100px;flex:0 1 80%;} body>div>header{order:1;flex: 200px;} body>div>main{order:3;align:right;min-height:400px;flex:1;} body>div>main{order:4;flex: 0 1 200px;} </style>
</head>
<body>
<div>
<nav>ex it</nav>
<header>flexem</header>
<main>hshsad</main>
<main>hsgdhsgd </main>
</header>
</body>
</html>
请帮忙，我是 HTML 和 CSS 的新手
提前致谢
最佳答案
这是一个例子。
Flexbox 属性并不像它们看起来那么神奇，最好在您的第一个内部设置一个 flexbox 容器。
/* Your 1st level container */
#container {
width: 100%;
height: auto;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
/* Just setting borders */
#container aside, #container main section, #container main div {
border: 5px solid black;
box-sizing: border-box;
}
aside {
width: 25%;
height: 600px;
}
/* This is the 2nd flexbox container */
main {
width: 75%;
height: auto;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
main section {
width: 95%;
height: 275px;
}
#container main div {
width: 30%;
height: 275px;
}<div id="container">
<aside></aside>
<main>
<section></section>
<div></div>
<div></div>
<div></div>
</main>
</div>关于html - 我如何使用 flex 容器 css 属性创建此布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42244902/