Home > OS >  What are the most important advantages of using flexbox instead of just using display: inline
What are the most important advantages of using flexbox instead of just using display: inline

Time:11-21

I know that it is far more comfortable to use flexbox instead of old concepts like

display: inline; float: right

But when you compare using flexbox just by putting a container and using display: flex; instead of just changing every element inside the container to display: inline;, what are the advantaged of using flexbox? I mean apart from using things like direction, wrap, justify-content etc.

So when I give an example like display in this image

Can I also achieve those properties (one item horizontally put after another within the container, together fitting the total container size) by using display:inline and float: right?

I know that this is ineffective. But I am searching for arguments why flexbox is a good alternative to the old inline/float-approach, even if you only use flexbox's main abilities.

CodePudding user response:

...arguments why flexbox is a good alternative to the old 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.

MDN flexbox

  • Related