我能怎么做？ CSS Flexbox 布局问题

Question

https://i.stack.imgur.com/XUzsT.png

如何在不使用 div 的情况下使用 flex 以最少的代码制作这种结构？

我的html；

<header></header>
<nav></nav>
<main></main>
<footer></footer>

Answer 1

根据您在上面的 cmets 中给出的示例，您可以尝试这样的事情，它不使用 <div> 标签：

body {
  display: flex;
  flex-wrap: wrap;
}

* {
  text-align: center;
  vertical-align: middle;
}

.header {
  background-color: red;
  height: 100px;
  flex: 100%;
}

.sidebar {
  background-color: yellow;
  height: 200px;
  width: 25%;
}

.main {
  align-items: flex-end;
  flex-direction: column;
  width: 75%;
}

.article {
  background-color: green;
  height: 150px;
  text-align: center;
}

.footer {
  background-color: blue;
  height: 50px;
}

<header class="header">Header</header>
<aside class="sidebar">Nav</aside>
<main class="main">
  <article class="article">Content</article>
  <footer class="footer">Footer</footer>
</main>
</div>

---

坦率地说，使用<div> 元素来调用指定容器的类会更有条理。如果您想这样做，请尝试：

* {
  box-sizing: border-box;
}

.header {
  background-color: red;
  padding: 50px;
  text-align: center;
}

.display {
  display: flex;
  flex-wrap: flex;
  text-align: center;
}

.content {
  background-color: green;
  text-align: center;
  padding: 75px;
}

.nav {
  background-color: yellow;
  flex: 25%;
  text-align: center;
}

.footer {
  background-color: blue;
  padding: 10px;
}

.column {
  flex-direction: column;
  flex: 75%;
}

@media screen and (max-width: 700px) {
  .row, .navbar {   
    flex-direction: column;
  }
}

<div class="header">
  <h1>header</h1>
</div>

<div class="display">
  <div class="nav">
    <h1>Nav</h1>
  </div>
  <div class="column">
    <div class="content">
      <h1>Content</h1>
      <p>Context text</p>
    </div> 
    <div class="footer">
      <h1>Footer</h1>
      <p>Footer text</p>
    </div>
  </div>
</div>