在HTML元素上实现flexbox的最佳方法?

时间:2015-01-15 01:32:17

标签: css flexbox

我对网页设计比较陌生,并且一直在使用flexbox。我很好奇实现它的最佳方法是什么。

如果我有一些像这样的代码:

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

最好将页面的每个部分(在本例中为header和nav)视为自己的父容器,并将每个部分的内容视为子容器。或者将整个文档视为父容器是否更好?

This一直是我对flexbox的主要参考,但我在那里找不到太多。

1 个答案:

答案 0 :(得分:0)

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

你的代码示例看起来有些贫乏,所以如何使用flexbox的好方案并不是真正想到的,这在很大程度上取决于你想要如何设计你的页面。

根据设备方向(媒体查询)将多级导航栏重新定位为侧边栏或顶部导航可能是收集经验的一个不错的案例。