Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

CSS3 Flexbox Properties - A Visual Guide

1:06 am on Sep 3, 2015 (gmt 0)

Moderator from US 

WebmasterWorld Administrator robert_charlton is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 11, 2000
votes: 400

Flexbox is officially called "CSS Flexible Box Layout Module Level 1" by W3C [w3.org...] It's so new that it's scarcely been mentioned on WebmasterWorld, but it's clearly a coming thing for CSS layout and deserves some attention. Apparently, it will be "optionally" supported by Bootstrap 4, and I trust the mods will allow me to post a link to a tutorial in these notes below.

The model is described by W3C as...
...a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

I'm by no means a CSS expert... quite the contrary... so I was delighted to come across the following introductory guide, which is clear enough that even I could get a very good visual idea of how Flexbox will work. I think that some aspects of Flexbox will be familiar to anyone remembering positioning and alignment in HTML table cells.

A Visual Guide to CSS3 Flexbox Properties
Dimitar Stojanov - April 13, 2015

...The prime characteristic of the flex container is the ability to modify the width or height of its children to fill the available space in the best possible way on different screen sizes.

Many designers and developers find this flexbox layout easier to use, as positioning of the elements is simpler thus more complex layouts can be achieved with less code, leading to simpler development process....

...This flexbox layout should be used for small application components, while new CSS Grid Layout Module is emerging to handle the large scale layouts.

PS: I should note that spelling not yet standardized in wide usage... I've also seen it as Flex Box and Flex-Box. The article uses both the single word and two word variant, I'm guessing to catch search, and I'm mentioning it so our content doesn't become invisible.
4:21 am on Sept 3, 2015 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
votes: 314

Thanks for graphic intro to CSS Flexbox usage, Robert. Another article has a different way of explaining how it works, also with graphic examples: [css-tricks.com...] it is from the TreeHouse group's CSS Tricks author Chris Coyier and is about a year older than the article by Stojanov. I consider Flexbox to be one of the most versatile new developments of css.

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members