- This topic is empty.
December 21, 2015 at 10:34 am #236071mohtabParticipant
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…December 21, 2015 at 11:08 am #236072bearheadParticipant
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.December 21, 2015 at 11:11 am #236073buildawesomewebsitesParticipant
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.
- The forum ‘CSS’ is closed to new topics and replies.