Question

大屏幕上是否有一个flexbox解决方案3列...

+-----+ +----------+ +-----+
|     | |          | |     |
|  A  | |    B     | |  C  |
|     | |          | |     |
|     | |          | +-----+
+-----+ |          | 
        +----------+

将改为......

+-----+ +----------+ 
|     | |          | 
|  A  | |    B     | 
|     | |          | 
|     | |          | 
+-----+ |          | 
+-----+ |          |
|     | +----------+
|  C  |
|     |
+-----+

在较小的屏幕上，其中A，B和C可以有不同的高度。基本上B将是主要内容，A和C将是侧边栏。

Answer 1

试试这个： -

<body class="HolyGrail">
  <header>…</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">…</main>
    <nav class="HolyGrail-nav">…</nav>
    <aside class="HolyGrail-ads">…</aside>
  </div>
  <footer>…</footer>
</body>

Flexbox 3列到2列（2个侧边栏到单个侧边栏）

1 个答案: