Reviewing some flexbox concepts today. Flexbox is really handy for coding things like a row of social icons, as shown in this image:
- “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:
Since I don’t use flexbox often, I always have to look this stuff up.
Resources
