使用 flexbox 而不是仅仅使用 display: inline 最重要的优势是什么
What are the most important advantages of using flexbox instead of just using display: inline
我知道使用 flexbox 比
这样的旧概念要舒服得多
display: inline;
float: right
但是当你比较使用 flexbox 只是通过放置一个容器并使用 display: flex;
而不是将容器内的每个元素都更改为 display: inline;
时,使用 flexbox 的优势是什么?我的意思是 除了使用 方向、换行、对齐内容等东西
所以当我举一个例子时
我是否也可以通过使用 display:inline
和 float: right
实现这些属性(一个项目在容器内水平放置一个接一个,一起适合容器的总大小)?
我知道这是无效的。但我正在寻找论据,为什么 flexbox 是旧 inline/float-approach 的一个很好的替代品,即使你只使用 flexbox 的主要功能。
...争论为什么 flexbox 是旧的 inline/float-approach...
的一个很好的替代品
Why Flexbox?
For a long time, the only reliable cross-browser compatible tools
available for creating CSS layouts were features like floats and
positioning. These work, but in some ways they're also limiting and
frustrating.
The following simple layout designs are either difficult or impossible
to achieve with such tools in any kind of convenient, flexible way:
Vertically centering a block of content inside its parent.
Making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is
available.
Making all columns in a multiple-column layout adopt the same height even if they contain a different amount of content.
我知道使用 flexbox 比
这样的旧概念要舒服得多display: inline;
float: right
但是当你比较使用 flexbox 只是通过放置一个容器并使用 display: flex;
而不是将容器内的每个元素都更改为 display: inline;
时,使用 flexbox 的优势是什么?我的意思是 除了使用 方向、换行、对齐内容等东西
所以当我举一个例子时
我是否也可以通过使用 display:inline
和 float: right
实现这些属性(一个项目在容器内水平放置一个接一个,一起适合容器的总大小)?
我知道这是无效的。但我正在寻找论据,为什么 flexbox 是旧 inline/float-approach 的一个很好的替代品,即使你只使用 flexbox 的主要功能。
...争论为什么 flexbox 是旧的 inline/float-approach...
的一个很好的替代品Why Flexbox?
For a long time, the only reliable cross-browser compatible tools available for creating CSS layouts were features like floats and positioning. These work, but in some ways they're also limiting and frustrating.
The following simple layout designs are either difficult or impossible to achieve with such tools in any kind of convenient, flexible way:
Vertically centering a block of content inside its parent.
Making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available.
Making all columns in a multiple-column layout adopt the same height even if they contain a different amount of content.