The Short and Long of CSS Flexbox Child Properties
Tags: css, flexbox, layout, webdev
Published: 2019-12-20 01:07:06

---
title: The Short and Long of CSS Flexbox Child Properties
published: true
description: Let's take a peek at some Flexbox Child Properties, because why not? 
tags: css, flexbox, layout, webdev
cover_image: http://sharkiecreates.ca/blog-imgs/flexbox-child-head-final.png
---

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.](https://dev.to/justsharkie/the-long-and-short-of-css-flexbox-container-properties-1b4a)

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:

![Diagram of container with 3 items in it.](http://sharkiecreates.ca/flexbox-blog-imgs/child/1.1.png)

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:

![Diagram of container with 3 items in it. Item 1 is on the left, item 2 in the middle, and item 3 on the right.](http://sharkiecreates.ca/flexbox-blog-imgs/child/2.png)

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

![Diagram of container with 3 items in it. Item 2 is on the left, item 3 is in the middle, and item 1 is on the right.](http://sharkiecreates.ca/flexbox-blog-imgs/child/3.png)

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:

![Diagram of container with 3 items in it. Items 1 and 2 are the same size, while item 3 is double the size.](http://sharkiecreates.ca/flexbox-blog-imgs/child/4.png)

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:

![Diagram of container with 3 items in it. Items 1 and 2 are the same size, while item 3 is double the size.](http://sharkiecreates.ca/flexbox-blog-imgs/child/6.1.png)

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;`.

![Diagram of container with 3 items in it. Items 1 and 2 are the same size, while item 3 is double the size.](http://sharkiecreates.ca/flexbox-blog-imgs/child/5.1.png)

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.