css - block 布局如何 "vertically biased"，内联 block 如何 "horizontally biased"？

Question

The flexbox layout algorithm is direction-agnostic as opposed to the block layout, which is vertically-biased, or the inline layout, which is horizontally-biased.
~ MDN

有人能解释一下这到底是什么意思吗？就“轴偏差”而言，这些布局与 flexbox 相比有哪些障碍？

Answer 1

如果您的代码中有 div(没有任何 css 样式，div 默认为“display: block;”):

<div>1</div>
<div>2</div>
<div>3</div>

div 将像这样垂直显示在页面上:

1

2

3

---

如果您的代码中有 3 个内联标签(“b”标签默认为“display: inline;”):

<b>1</b>
<b>2</b>
<b>3</b>

它们将像这样水平显示在页面上:

123

---

Flexbox与它们相反，flexbox有block、inline、table等一些能力。因为 flexbox 不是 block 或内联元素，所以 flexbox 是“方向”元素。

例如，尝试比较 PIXEL 和 VECTOR。 (可能不是最好的例子，但它有助于理解 flexbox)。