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:

From there, I established a quick getting started and list of available properties:

  1. 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)
  2. 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.
  3. set flex-container to ‘display: flex;’. This is the basis for all of the flex properties.
  4. play with Properties:

Container Properties (Flex Container)

*set it up*

display: flex;

*row/column/reverse*

flex-direction: row | row-reverse | column | column-reverse;

*wrap it?*

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)*

order: <integer>;

*** 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.

Show your support

Clapping shows how much you appreciated Abby Starnes’s story.