In the last lesson we outlined flexbox properties used to customize how parent flex containers displays their children. In this lesson we'll address the properties available to further customize and configure individual flex item children within those parent flex containers.

Flex Items

Remember, the children items inside a flexbox are called flex elements or flex items.

In addition to flexbox properties called on the parent to alter the display of flex items, we can also customize individual flex items with the following properties:

Flex Item Properties

order

order alters the order an individual flex item appears in. It accepts any numerical value, including negative numbers.

For instance, if we had five flex items and applied an order property of -1 to the fifth, using this flexbox playground, we can see the fifth item move to the front:

When no order is specified, a flex item's default order is 0.

flex-basis

flex-basis determines the default size of a flex item before extra space on the axis is divvied up between children. But here's the thing: It's not a guaranteed size, it's actually more like a preferred size.

What does this mean? Well, David Geddes explains it best in his article The Difference Between Width and Flex Basis:

flex-basis is the size of flex items before they are placed into a flex container. It’s the ideal or hypothetical size of the items. But flex-basis is not a guaranteed size! As soon as the browser places the items into their flex container, things change...often times the flex container won’t have enough space, or will have extra space, after all its items’ flex-basis values are added up...

What does this mean? Let's consider an example from this same article by David Geddes:

Here, we have eight flex item children each with a flex-basis property set to 200px, like so:

.child {
  flex-basis: 200px;
}

But these children must fit into a flex container with a width of only 1000px, also seen in the image above. Thankfully, because we're using flexbox, we have a little more...well...flexibility than we otherwise would. Even though 200px is the ideal flex-basis size for each flex item, flexbox will still resize them to all fit:

Essentially, flex-basis is a more flexible version of an item's width that may be automatically resized when required.

We can even specify preferences for how a flexbox shrinks (or grows) items' flex-basis to best fit their container using the flex-grow and flex-shrink properties, discussed below.

flex-basis supports all standard length units (pixels, percentages, etc.), or the term auto which inherits a size. If no flex-basis is applied, flex items will have an auto inherited flex-basis by default.

flex-grow

flex-grow defines how much a flex item will grow to fill available main axis space (when necessary) in relation to its siblings. It takes a positive numerical value, and defaults to 1 when not specified.

For instance, notice the fifth item below has a flex-grow value of 2. It therefore expands to fill more available space than its siblings:

The number we provide to flex-grow is a unitless value that acts as a proportion. To quote the CSS Tricks' Guide to Flexbox:

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).

flex-shrink

flex-shrink is similar to flex-grow, but denotes how much a flex item will shrink to fit into available main axis space, if necessary. It also supports any positive numerical value and will default to 1 if not specified.

For instance, notice the fifth item below has a flex-shrink property of 5. Because 5 is greater than the default 1 applied to the other items, it shrinks to take up substantially less space than its siblings:

align-self

align-self overrides the align-items property from the parent in order to align an individual flex item differently than its siblings.

For instance, if we wanted all flex items besides one to align flex-start, but one item to align at baseline, we could apply a align-items: flex-start; declaration to the parent container, then an align-self: baseline; declaration to the child item.

align-self, similar to align-items, accepts the following values:

• flex-start: aligns the item to the beginning of the cross-axis.

• flex-end: aligns the item to the end of the cross-axis.

• center: centers the item on the cross-axis.

• stretch: Stretches the item to fill available space.

• baseline: aligns the item's baseline with the axis.

Conclusion

We'll have plenty of time to practice flexbox in class. You'll find the more you use flexbox, the more intuitive these rules become. In the next lesson we'll briefly discuss a few shortcuts to DRY up flexbox CSS even further.