At time of print, flexbox is not a new thing for CSS. You can get a large number of articles excitedly talking about it from three or four years ago. I now rate it as stable technology, which should be deployable without issue. It has enough support that you can use it to improve customers user-journeys, rather than awkwardly fail.

Sensible use

i.e. your CSS framework. If you have no CSS framework, fix this first.

  • Decent docs for Foundation framework 1
  • Also good docs, for Bootstrap 2
  • flexigrid 3 ~ single use library...
  • Frow 4 ~ and another
  • A toy 5 to play with settings, and see what works on specific browsers.
  • and probably many more. This list is just so that my code sample at the end doesn't seem to support bad practice.

Things to consider

  • Has decent support for vertical alignments 6 7. The code samples on the second link is better, although less well presented, and probably has less browser support. This is worth whatever the transition cost is its own right.
  • If you use enough variants, flexbox is completely supported by 94% of browsers 8, and partially supported by most of the remaining 6%. This makes it more stable than all previous technologies and hacks for the same objective. A context reference 9
  • This should be used with screen units (which are basically percentages... with adaption for changing orientation) and em. Quite a few frameworks are using em, as it leads to more readable designs.
  • When people on 10 11 'dows laptops make everything supersize, and so small amount of things per screen-full. Flexbox will tend to work.
  • Some notes say the shortform flexbox render faster 12. I haven't tested this statement.
  • Some care needs to be invested, to have a page that packs well on desktop and mobile; read 13. As ever knowing your current audience and your desired audience is important prerequisite. I normally do this by tactically setting display to block on a maximum width; but there are better solutions. Whilst you can have 80% of your screen empty (i.e. a badly organised mobile layout on a desktop screen), its abit wasteful, and if the user wanted to look at empty space, the wall behind is easier.
  • Some of this is superceded by grid, check your usecase.

Prototype Toy

UPDATE: also this toy^H^H^Hgame
As a minimum, not recommended for industrial use:

.table .tr { text-align:center; display:flex; flex-flow: row nowrap; width:100%; }
.table .tr .td { text-align:center;  justify-content: space-between; flex-grow: 1; flex-basis: 0; flex:1; padding:0.5em; }
/* the 3rd column needs more space */
.table .tr .td:nth-child(3) { flex:2; }
.table .thead { /* ... */ }


Mostly as a reference to me, a complete list of CSS keywords, relevant to flexbox. There are too many articles that miss half the detail, so here is a boring list (and see below for grid):

  • display: flex ~ required for the things below
  • flex-basis: [auto, n] ~ sets the initial size of items
  • flex-wrap: [ nowrap, wrap, wrap-reverse ]
  • flex-grow: n
  • flex-shrink: n
  • flex-flow: [ row, wrap, column ] ~ tricky composite item, assembling flex-direction and flex-wrap
  • flex-direction: [column, column-reverse, row, row-reverse]
  • order: n ~ i.e. the sequence to display
  • justify-content: [ space-around, space-between, flex-start, flex-end, baseline, centre, space-evenly ]
  • align-items: [ flex-start, flex-end, center, baseline, stretch ]
  • align-content: [ start, end, centre, stretch, space-around, space-between, space-evenly ]
  • align-self: [ flex-end, flex-start, center ]

I found some other thorough articles 1 2 3

Grid keywords...

Foundation class names ~ needs to be v6.2, the newer versions use grid. Including kitchen sink demo
I have pulled out keywords from the source, use these to efficiently search.

  • row, columns
  • small-{N}, medium-{N}, large-{N} ~ choose scale word to match desired screen-size N to match amount of screen used. The size word indicates how larges the screen is.
  • {W}-shrink, {W}-expand, {W}-unstack {W}-order-{N} ~ used as suffixes to the previous scale words.
  • there are more more specialised items, see raw source.
  • 5 6 7

Bootstrap class names ~ needs to be bootstrap4

  • NORMAL USE CLASSES (for each of this list, W may be one of [sm,md,lg,xl]): d-{W}-flex, d-{W}-inline-flex, flex-{W}-row, flex-{W}-row-reverse, flex-{W}-column, flex-{W}-column-reverse, justify-content-{W}-start, justify-content-{W}-end, justify-content-{W}-center, justify-content-{W}-between, justify-content-{W}-around, flex-{W}-fill, flex-{W}-grow-{N}, flex-{W}-grow-{N}, flex-{W}-shrink-{N}, flex-{W}-shrink-{N}, order-{W}-{N}, flex-{W}-nowrap, flex-{W}-wrap, flex-{W}-wrap-reverse, align-content-{W}-start, align-content-{W}-end, align-content-{W}-center, align-content-{W}-around, align-content-{W}-stretch, align-items-{W}-start, align-items-{W}-end, align-items-{W}-center, align-items-{W}-baseline, align-items-{W}-stretch, align-self-{W}-start, align-self-{W}-end, align-self-{W}-center, align-self-{W}-baseline, align-self-{W}-stretch
  • flex-container, flex-item
  • justify-content-[center, end, between, around, start] align-items-center, flex-grow-1, flex-shrink-1, order-N, align-content-end, align-content-center, align-content-between, align-content-around, align-content-stretch, align-items-start, align-items-end, align-items-center, align-items-baseline, align-items-stretch, align-self-start, align-self-end, align-self-center, align-self-baseline, align-self-stretch
  • d-flex d-inline-flex, flex-fill
  • flex-row flex-row-reverse flex-column flex-column-reverse, flex-nowrap, flex-wrap, flex-wrap-reverse
  • 8 9
  • 10 11 12
  • This list shows in diagrammatic form why I prefer Foundation.