块布局如何"vertically biased"，内联块如何"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

有人能解释一下这到底是什么意思吗？就 "axis bias"?

而言，这些布局与 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 不是块或内联元素，所以 flexbox 是 "direction"-element.

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

Answer 2

我通常不喜欢 W3School，但他们对 flexbox 的教育对我很有用。其实很好理解。

Flex 布局使用 flex 项目，无需蛮力即可自然地采用许多不同的对齐形式。

Flex 项目可以堆叠、并排对齐、在多个方向上、自动计算这些项目之间和周围的间距以及它们之间的间距以获得均匀间距等。它们可以复制块（从上到下）和内联（从左到右），甚至更多。他们不偏向于一个方向，而是天生对多种方向的变化持开放态度。

View Here

块布局如何"vertically biased"，内联块如何"horizontally biased"？

How is the block layout "vertically biased", and how is inline-block "horizontally biased"?

css

layout

position

flexbox