CSS Layout: Flexbox
Learning Goals
- Explain what flexbox is and why its an important tool for creating layouts
- Explain the difference between a parent and child element, be able to identify immediate children
- Apply Flexbox to containers in order to achieve a desired layout
Pre-Work
Read through Intro to Layout Pre-Work document and all links provided and complete exercises provided in it. Be prepared to demonstrate your understanding of the concepts in that document when you come to this class.
Vocabulary
flexbox
- a layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spacesdisplay
- a css property that sets whether an element is treated as a block or inline element and the layout used for its children, such as grid or flexflex parent
orflex container
- Any HTML element that has been given thedisplay: flex
declarationflex child
orflex item
- Any immediate descendants of a flex parentmain axis
– the primary axis along which flex items are laid out. It can be horizontal or vertical, and is defined by the direction set by theflex-direction
property.
Warm Up
- With a partner, fork this codepen
- Explore the CSS that’s already present. Without googling, what do you think
:nth-child
means? - In your CSS, add the property of “display” with a value of “flex” to the
.wrapper
selector. What happened? Which elements visually changed?
What is Flexbox?
Flexbox is a part of CSS that provides an efficient way to lay out, align and distribute space among items in a container. Before flexbox became popular, it was a real challenge to center elements. We would use something called float
, which could behave unpredictably at times.
Parents and Children
As we start working with flexbox, a very important distinction should be pointed out. We need to be careful about the CSS rules we apply to a parent element vs. those to a child element. A parent element wraps other elements, a child is nested inside the parent.
Let’s look an some HTML to make sure we are all on the same page. Which element is the parent and which are its children?
<section>
<h1></h1>
<article></article>
<article></article>
<article></article>
</section>
The Answer
In the code above, the section
is the parent element, the <h1>
and the 3 article
s are all children elements because they are directly nested inside of that section
. Proper indentation is really helpful here!
What about in this block of HTML?
<section>
<article>
<h2>Title of Article 1</h2>
</article>
<article>
<h2>Title of Article 2</h2>
</article>
<article>
<h2>Title of Article 3</h2>
</article>
</section>
The Answer
In the code above, we now have these h2
elements nested inside of each article
. It’s important to know that h2
is not a aimmediate child of the section
. It is technically a grandchild, and a child of article
. The idea of immediate child is really important to understand as we work with Flexbox.
When we use Flexbox, we will make the parent elements flex containers
and the children elements flex items
.
(Graphics from CSS Tricks)
Partner Practice
- Go back to your codepen from the warm up
- Experiment adding the “justify-content” property to your
.wrapper
. Add the following values (one at a time), and note what changes:center
space-around
space-between
- Delete or comment out your justify-content declaration. Add the following to your
.wrapper
, and note what changes;:flex-direction: column
align-items: center
Note
Most flexbox-related properties have default values. We don’t see them in our CSS, but can know that they are being applied! These properties can always be changed by us. You’ll see some default values indicated below.
Flex Direction
Another CSS property with flexbox is flex-direction
. This property takes one of four values:
row
(default): left-to-rightrow-reverse
: opposite of row (right-to-left)column
: same asrow
but top to bottomcolumn-reverse
: same ascolumn
but bottom to top
Justify Content
justify-content
allows us to define the alignment of items (flex children) along the main axis, and is incredibly useful for centering elements.
flex-start
(default): items are packed toward the start lineflex-end
: items are packed toward to end linecenter
: items are centered along the linespace-between
: items are evenly distributed in the line; first item is on the start line, last item on the end linespace-around
: items are evenly distributed in the line with equal space around themspace-evenly
: items are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same
See the Pen Flexbox & justify-content by CSS-Tricks (@css-tricks) on CodePen.
The above Codepen is an example from CSS Tricks
Partner Practice
- In your previous “Flexbox Playground” codepen, make sure the
.wrapper
has the following styles applied:flex-direction: column
justify-content: center
- What happens? Why do you think that is?
The Answer
In the section above, you should have observed that justify-content: center;
had a different impact - it centered the items vertically. Since flex-direction: column;
was applied, the main axis was the vertical axis. justify-content
will apply it’s values to the items along the main axis.
Align Items
Just like we can control how our content sits on the main axis with justify-content
, we have a tool to control how our content sits on the cross-axis.
stretch
(default): stretch to fill the container (still respect min-width/max-width)flex-start
: cross-start margin edge of the items is placed on the cross-start lineflex-end
: cross-end margin edge of the items is placed on the cross-end linecenter
: items are centered in the cross-axisbaseline
: items are aligned such as their baselines align
Partner Practice
- In your previous “Flexbox Playground” codepen, make sure the
.wrapper
has the following styles applied:align-items: center
- Play around with and without
flex-direction: column
Note
These properties will get you far enough for now, but they’re just scratching the surface at what flex can do! If you want more, check out this extensive guide from CSS tricks.
Additional Practice
Instructions
- Fork this repo
- Examine the HTML, taking note of parent and child elements
- Re-create the following comp using flexbox - work on making small, atomic commits! Feel free to take creative liberty on color schemes, fonts, placeholder images/logos, etc.
NOTE: The HTML has been provided for you, but you are free to make changes if needed (ie: adding divs, classnames, etc.)