Flexbox Basics
Today, we’re going to learn some of the basics of flexbox and it’s properties including direction, wrap, order, grow, shrink, justify-content and align-items.
We’ll use a simple structure to practice these skills between 2 files — index.html and a style.css.
The site is going to have 3 header elements that are nested inside their own ‘flex-element’ div and have two parent levels on top — ‘container’ and ‘top-level.’
We’ll start by giving each element a color and the document as a whole a little padding.
Here’s the final result:
The first thing to note is that you should always designate the flex display on the parent element of the items you want inside the flexbox. So instead of including flex on the ‘top-level,’ you will add it to the ‘container’ div.
As you can see, the container still extends the full width and the elements are now automatically contained side-by-side.
To limit the container to the size of the elements inside, you can use ‘inline-flex.’
The remainder of this post will be very picture-heavy to illustrate the power of these properties.
Direction
Options: row (default), row-reverse, column, column-reverse
CSS Designation:
flex-direction: row; Examples:
Wrap
This property is used specifically for overflow within flexbox containers. Let’s say you added a bunch of elements.
As you can see here, the last element extended past the border on the right.
Options: nowrap(default), wrap, wrap-reverse
CSS Designation:
flex-wrap: nowrap;I’ve added the rainbow color flow and numbers to show the difference between wrap and reverse.
Wrap goes from the first level to the second and the reverse stars at the second row and then starts again at the top. It is relevant to recognize that if you added a column flex-direction in the container, you do not need a wrap — divs can extend down the screen, but can only take up as much width as the viewport allows.
Order
Let’s go back to the 3 element list to talk about order.
This property does exactly what you’d expect, change the order of the listings.
CSS Designation
order: 1; //or any number
A ‘-1’ adds an element to the front of the list.
You can obviously change the HTML file directly and put the 3rd element first, so this property may be more useful when you are loading elements from a backend database and need to reorder them. It is important to note that this property does not actually change the order in the HTML, it simply renders the elements differently using CSS.
Grow, Shrink and Basis
These properties are all used to manipulate the size of the elements.
Grow — specifies how much an item will grow relative to other flexible items in a container.
CSS Designation
flex-grow: 1; 
If you made each element grow by 1, this would simply fill up the container.
Since the sizing is relative to one another, attempting to grow all the items by ‘2’ would not accomplish anything. You can however grow individual items.
For example, let’s say you grew the middle element by 3.
aaaand 5…
Shrink — the opposite of grow
Basis — can be designated to all flexed items or singular. It essentially sets a base length for the element.
CSS Designation:
Here, we are added a basis of 300px to all 3 elements.
Justify-Content
The focus for this property is the x-axis. Using justify-content on the container, you can manipulate where all the flexed elements are rendered horizontally.
Options: flex-start (default), flex-end, center, space-around, space-between
CSS Designation:
justify-content: center; Examples:
Align-Items
This property is similar to justify-content, but it is focused on the y-axis. It can be implemented on both the container (to control all flexed elements) or individual flex elements.
Options: stretch (default), flex-start, flex-end, baseline, center
CSS Designation
align-items: stretch;
To illustrate the power of this property, we first need to give our container some height.
Flex-start lines up the elements with the container’s beginning and baseline lines up the elements where most of the element’s content sits. To illustrate this difference, we can increase the font for one of the elements.
You can of course combine justify-content and align-items to accomplish big things. For example, centering all the elements in the middle of a container.
For individual elements, you use ‘align-self.’
Shorthand
There are a few shortcut properties you can use to combine some of the above.
Flex-flow: combines direction and wrap
flex-flow: row wrap;
flex-flow: column wrap-reverse; Flex: combines grow, shrink and basis
flex: 0 0 500px; //is the same as:
flex-grow: 0;
flex-shrink: 0;
flex-basis: 500px;
Boom! Now you can flex on all your projects!
