Floats are considered the best way to space things horizontally instead of the default vertical stack. However, I'm sure we all know how awkward, buggy, and difficult floats can be to both learn and implement on complex websites. One of the biggest issues that one can run into when using floats is that they do not work well at all with containers. Since most websites these days (or mostly anything that is responsive) has a wrapper, this becomes a big issue. Although this issue can be fixed by using "clear: both;" with the container, that doesn't mean that that's the right way to fix it.
So I did a little more research to see if there was anything else out there, and I came across something interesting. You can use an inline-block display to accomplish this, and it actually works quite well with mostly all browsers. However, this technique tends to leave odd white space in between elements.
Flexbox, however, is the best alternative that I think that I've found. It allows you to space everything horizontally to the browser width and keeping said ratio at any screen size. I threw together a live example as a demonstration: http://www.michaelzapatka.com/flexbox.html
I honestly think is the best solution for a modern, mobile ready site. Its responsive and extremely efficient and easy to learn. Although my example is already responsive with wrap, I was going to put together a working example of an actual mobile layout, but then I found someone who already had (I don't want to fix it if it isn't broken): http://codepen.io/HugoGiraudel/full/qIAwr/
Not to curb my excitement about this, this will definitely be implemented and tested with my next project.
No comments:
Post a Comment