在 HTML 元素上实现 flexbox 的最佳方式？

Question

我对网页设计还比较陌生，一直在研究 flexbox。我很好奇实现它的最佳方法是什么。

如果我有一些这样的代码：

<body>
 <header>
     <h1>Page Header</h3>
 </header>
  <nav>
    <ul>
     <li>Nav Thing 1</li>
     <li>Nav Thing 2</li>
    </ul>
   </nav>
  </body>

最好将页面的每种部分（在本例中为页眉和导航）视为其自己的父容器，并将每个部分的内容视为子容器。还是把整个文档当作父容器更好？

This 是我对 flexbox 的主要参考，但我在那里找不到太多相关信息。

Answer 1

您可以根据需要执行这两项操作，因为 flexbox 也可以将 flexbox 作为子项，这应该会减少您对非语义容器元素的需求。

您的代码示例看起来有点乏味，因此并没有真正想到如何使用 flexboxes 的好场景，这在很大程度上取决于您想要如何设计页面。

根据设备方向（媒体查询）将多级导航栏重新定向为侧边栏或顶部导航可能是收集经验的好案例。

在 HTML 元素上实现 flexbox 的最佳方式？

Best way to implement flexbox on HTML elements?

css

flexbox