The Short and Long of CSS Flexbox Child Properties

Annnddddddd welcome back friends! This time, we're digging right into Flexbox Children, and the properties they come with.

Link to last post on Container properties.

What to expect from this blog post? More diagrams, more lists, and hopefully some helpful information. Maybe. We'll see.

Let's goooooooo.

Parent/Child Relationship

So last time we focused on containers, or the parent element of Flexbox. Today, we're looking into the children of said parents, or what's contained within the containers. Make sense? No? Well here's a visual representation for you to check out:

So, as we can see, a child element is a direct relative of a parent element. And when you set the parent element to display: flex;, the child element immediately inherits that and becomes a flexible item. With that, we have some new, child specific properties that we can use to manipulate these items.

Enter The Properties

Let's continue what we started in the first post on Flexbox Container Properies and use lists and diagrams to do some serious learnin'.

order
This property does exactly what it says on the tin - it defines the order of the items within the container. It takes a number value, which tells the object where to go: so if we, say, give Item 3 a property of order: 0;, it will appear at the beginning of the items, like so:

Whereas if we give Item 1 an order property of order: 4;, it will look like this:

Simple, yet effective. A good, solid property.

flex-grow
Now this is a little less simple, but just as effective.

So this let's the items grow to fit the available space, and defines how big an item is. The default value is 0, with no growth. But as you increase this value, the size of the item increases/decreases depending on the value of all of the other items.

Confused yet? I am.

Let's say you have a value of flex-grow: 1; on Item 1 and Item 2, but on Item 2 you set it to flex-grow: 2;. This means Item 3 will grow 2 times faster than the other flex items, so will look a little something like this:

This has some serious potential in making good, responsive websites. Which brings me to the next property:

flex-shrink
Guess what this does? Come on, I believe in you, I do.

This property shrinks the item it's on by whatever value you give it. The default value is 1, so let's say we gave Item 3 a property of flex-shrink: 2;. We'd end up with something like this:

So yep, it's exactly the opposite of the last property. Grow makes the item get bigger, while shrink makes them smaller.

flex-basis
Kinda connected to the above two properties, this also deals with the length of the items. This set the initial length of the item, and is measured by a length unit or a percentage.

I'm not actually going to diagram this one. Please scroll back up to the flex-grow diagram and imagine that instead of using flex-grow: 2; we used flex-basis: 200px;. Same result, but instead of letting the browser define the length, we are specifying it ourselves.

flex
A shorthand property that encompasses flex-grow, flex-shrink and flex-basis (in that order). Yep. That's it. Moving on.

align-self
This property specifies the horizontal alignment of the item in the container, and comes with a few different values.

• align-self: center; - aligns the item to the center of the container (horizontally)
• align-self: flex-start; - aligns the item to the top of the container
• align-self: flex-end; - aligns the item to the bottom of the container.

So for this next diagram, I'm going to show an example of all of the items (as well as a default item without this property attached). Item 1 is the default, item 2 is align-self: center;, item 3 is align-self: flex-start;, and item 4 is align-self: flex-end;.

Don't worry if this doesn't make sense! What works best for me is coding up a simple layout (usually something that looks exactly like my diagrams) and playing with the properties and values.

Conclusion

Wait... that's it? This felt a lot shorter to write than the post on container properties...

But I hope this was helpful to you like it was to me. And if not, that's okay too! There are so many great resources out there on Flexbox.

And this is just the beginning. There are so many advanced techniques, specialized use cases... I have a feeling I'm not done writing about Flexbox just yet.