Notes on Flexbox
When I first heard about Flexbox, it was not being widely used and was more of a fun idea of what web development would be like in the future. It was hope for liberation from floating and display: inline-blocking elements to arrange them on the page.
Recently, however, I overheard a couple of front end developers discussing whether Flexbox or Susy was better for building on a grid, and I realized Flexbox has become standard practice. I hope to compare the two, but started by getting a rundown on Flexbox.
I read through the CSS-Tricks Guide to Flexbox:
The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient…css-tricks.com
From there, I established a quick getting started and list of available properties:
- create a container with items inside. Flex box properties are applied to items relative to their container (just like positioning something absolute is relative to the parent container)
- set a height and width to the flex-items. give flex-container and flex-items a background-color/border and number so you keep track of them while you work.
- set flex-container to ‘display: flex;’. This is the basis for all of the flex properties.
- play with Properties:
Container Properties (Flex Container)
*set it up*
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
*combo: row/column/reverse & wrap it*
flex-flow: <‘flex-direction’> || <‘flex-wrap’>;
*justify (like text paragraphs)*
justify-content: flex-start | flex-end | center | space-between | space-around;
*align individual items (like aligning an object in photoshop)*
align-items: flex-start | flex-end | center | baseline | stretch;
*align all items (like aligning grouped items in photoshop)*
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
Child Properties (Flex Items)
*change order of items (default is order in html/markup)*
*** tricky/not intuitive: setting dominance of the item, like with z-index. eg. if you have 3 items set as a 2, they will stay in their original (html markup) order, in front of any items set to 1 (default) ***
*assign item a proportion of space to grow into*
flex-grow: <number>; /* default 0 */
*assign item a proportion of space to shrink into*
flex-shrink: <number>; /* default 1 */
*** had trouble getting this property to apply ***
*default size of element before remaining space is distributed*
flex-basis: <length> | auto; /* default auto */
e.g length 20% or 5rem, auto means “look at my width or height property”
0 = extra space around content not factored in
auto = extra space distributed based on flex-grow value
*combo: flex-grow, flex-shrink and flex-basis combined*
flex: none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]
align-self: auto | flex-start | flex-end | center | baseline | stretch;
I played around with these all in a jsfiddle:
After getting an understanding of the purpose of each property, I went through the Flexbox Froggy game to review:
I am excited to try out Flexbox in a project to see how it all comes together to build a project on a precise grid. I plan on looking into Susy soon, so I can compare.