块布局如何&​​#34;垂直偏置",以及内联块"水平偏置&#34 ;?

时间:2016-07-29 02:05:26

标签: css3 layout position flexbox

  

flexbox布局算法与方向无关,而不是垂直偏置的块布局,或者是水平偏置的内联布局。
  〜MDN

有人可以解释这究竟是什么意思吗? 在"轴偏差" 方面,与flexbox相比,这些布局有哪些障碍?

2 个答案:

答案 0 :(得分: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具有块,内联,表格和其他一些功能。因为flexbox不是块或内联元素,所以flexbox是“方向” - 元素。

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

答案 1 :(得分:0)

我通常不喜欢W3Schools,但他们对flexbox的教育对我很有用。这实际上很容易理解。

Flex布局使用弹性项目,可以自然地采用许多不同的对齐形式而不会发生暴力。

Flex项目可以在多个方向上堆叠,并排排列,自动计算这些项目之间的间距以及它们之间的间距等等。它们可以复制块(从上到下)和内联(从左到右),甚至更多。它们并不偏向于单向,而是开放于一定程度上的方向变化。

View Here