Introduction

I’ve been starting to work with CSS flexbox for one of my projects at work that has some very sophisticated alignment, spacing, sizing, and positioning specifications. It’s heavy in animations and must respond dynamically to window dimension changes. One of my co-workers advised that I try out flexbox since it specializes in these types of properties.

This post will cover the main properties and what they do. For more information, here are some useful resources:

1. Flexbox guide
2. Gamification to learn flexbox
3. Challenges that were solved with flexbox

Parent Properties

Allowing Flexbox Properties

You must first specify that the div should respond to flex CSS properties by setting display: flex in the parent.

Axis & Cross-Axis:

http://www.flexboxdefense.com/images/flexbox-column-a0e8dc099b07e1cfd6eaa6da2525cf54.png

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

justify-content (cross-axis/horizontal spacing)

The justify-content property is a fancy way of saying horizontal alignment. You can align flex-start (left), center (center), flex-end (right), space-between (space items evenly using their widths), or space-around (space all items so that they have equal space between them).

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

align-items (across cross-axis/vertical spacing)

The align-items property allows you position a container’s items across its cross-axis — basically meaning vertically. There are three possible values: flex-start (top), flex-end (bottom), and center (vertically in the middle).

.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-wrap

Can determine whetehr or not the children are capable of wrapping.

.container{
    flex-wrap: nowrap | wrap | wrap-reverse; /* default nowrap */
}

Child Properties

order (order of items)

This can be set to display the children in an order different from when they appear. It accepts an interger value as its parameter and they are all relative — that is, they do not need to be sequential. Making the first component -10 and the second component 0 has no difference from making the first component 1 and the second component 2.

.item {
    order: $integer;
}

flex/flex-grow/flex-shrink (proportion they scale to fill their container)

This property describes the item’s ability to scale and fill the container. Like order, the numbers are all relative so having an item with flex: 1 (or flex-shrink/flex-grow if you want to set them independelty) will scale half the size of an item of the same parent with flex: 2. Negative numbers are not allowed.

.item {
    flex: $number; /* default is 0 */
    flex-grow: $number;
    flex-shrink: $number;
}

Posted in Web Development with CSS, Tutorial