Workout with flexbox

I started and completed the Code School flexbox course today, and then started and finished the surprisingly fun Flexbox Froggy exercises to reinforce what I’d just reviewed. It was very helpful to do this combination.

I wrote some Flexbox notes here back in August. Now I’ve got a more complete set of notes (offline) and a new Pen to remind me how to use flexbox the next time I need it.

Flexbox notes

Reviewing some flexbox concepts today. Flexbox is really handy for coding things like a row of social icons, as shown in this image:

Image: Social icons in a row

  • “A flex container expands items to fill available free space, or shrinks them to prevent overflow.”
  • “Flexbox layout is good at small-scale layouts, whereas the (emerging) Grid layout is intended for larger-scale layouts.”
  • “Instead of talking about horizontal (inline) and vertical (block), flexible boxes use the terms main axis and cross axis. … The main axis is the axis along which the flex items follow each other. The cross axis is the axis perpendicular to the main axis.” (source)

In today’s browsers (2017), this calls for various prefixes and several lines of CSS to declare the main axis:

-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;

Having supplied those four lines of CSS, you’ve determined that the main axis of the element is horizontal. Following the flexbox standards, you can write simply flex-direction: row; and then (when you’ve written all your CSS) run the file through a formatter (such as Atom’s autoprefixer package) to get all the extra lines added for you.

“By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed” with flex-wrap: wrap; (source). This is important to consider if you have a lot of things in a row (such as the social icons above), and you don’t want them to shrink to little dots on a vertical phone screen — which they will do if you don’t wrap the line. Using wrap will make the icons do this on a phone:

Image: Social icons with flex wrap

Since I don’t use flexbox often, I always have to look this stuff up.