What's the most common and professional way of positioning your blocks

[mohtab]

I am having an extremely hard time figuring out how I should arrange the blocks on a page.
Some posts use flex, some use float, some use box, some use a mix…

Statistically which one is the most common and most professional? (I don’t want the easiest one) I want the to know the one that is best for cross device… [I mentioned statistically to avoid an opinion based question]

if you could give a brief overview it would also a bonus…but my major question is to just stick with 1 for the time being…

[bearhead]

There probably isn’t a single layout method that will be the best in every scenario. Even the idea of a “best” method can mean may things… most semantic, most maintainable, deepest support etc…

I will say that flex is probably the most progressive way, but legacy browsers don’t support it.

Floats are probably have the deepest browser support…

I guess in general it would probably make the most sense to use flex and then ensure that the site degrades gracefully on legacy browsers.

[buildawesomewebsites]

display: flex will override floats (which is used on display: block elements) and display: inline-block, which means it can be treated as an enhancement to your layouts. Therefore, older browsers will simply use the float and inline-block-style layouts, while modern browsers will use flexbox. This is the best way to make sure your layouts are presentable across all browsers.

When it comes to using floats – just make sure you have a clearfix class on the parent container.

When it comes to using inline-block, just be aware of the small spaces that can occur between elements and ways to deal with it.

There are many scenarios where either using floats or inline-block will be all you need for a particular section on a site. It just depends on the demands of the design.

[Author]

Posts