Question

代码：

<!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的新手

提前致谢

Answer 1

这是一个例子 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>

如何使用flex容器css属性创建此布局

1 个答案: