Question

我已经在一些地方读过，在使用flexbox时，您应该拥有<header>，<main>和<footer>标签中的所有内容，以便Flexbox发挥其魔力。这是真的？这些标签需要吗？

Answer 1

没有。请参阅规范的abstract：

该规范描述了针对用户优化的CSS盒模型   界面设计。在flex布局模型中，flex的子节点   容器可以在任何方向布置，并且可以“弯曲”它们   尺寸，要么增长以填充未使用的空间，要么缩小以避免   溢出父母。水平和垂直对齐的   孩子们很容易被操纵。嵌套这些盒子（水平   内部垂直或垂直内部水平）可用于构建   两个方面的布局。

CSS是一种用于描述结构化文档呈现的语言   （例如HTML和XML）在屏幕上，纸上，演讲等中

Flexbox是CSS的一部分，CSS是一种独立于HTML的语言。所以说它需要一些HTML元素是没有意义的。

这里有一个不使用这些元素的工作示例：

div { display: flex; }
span { border: 1px solid; }
span:nth-child(1) { flex-grow: 1; }
span:nth-child(2) { flex-grow: 2; }
span:nth-child(3) { flex-grow: 3; }

<div>
  <span>A</span>
  <span>B</span>
  <span>C</span>
</div>

Flexbox和<header>，<main>和<footer>标记

1 个答案: