Flexbox is a part of CSS that provides a more efficient way to layout, align, and distribute space among items in a container. It helps us when we have those silly block elements that can be hard to tell them to do exactly what we want.
🎯 Learning Goals
Explain the difference between a parent and child, and a direct child
Apply Flexbox to containers to achieve a desired layout
📗 Technical Vocabulary
Child
Container
Direct child
Item
Parent
Flexbox IRL
Flexbox is used all over the internet. It’s a little tough to learn, but once you know it, it makes your life a lot easier! That’s why it is so popular among front-end developers.
Here are just a few popular pages that use Flexbox:
HBO max uses Flexbox on the top Navbar of the landing page and in the sections that display titles as you scroll.
TikTok’s Desktop Site uses Flexbox to organize posts, their captions and the info of the user who posted.
Adidas uses Flexbox for the product tiles in the Popular Right Now section of its landing page.
Parents and Children
Before we start working with Flexbox, we need to make sure we are referring to elements and their relationship to other elements correctly. 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, and a child is nested inside the parent. We will also refer to parents as containers, and children as items.
Let’s look an some HTML to make sure we are all on the same page:
In the code above, the section is the parent/container, and the 3 articles are all children/items because they are directly nested inside of that section. An article is an element that contains content specific to itself. The article element could be blog post, a news article, and any content of a webpage that could standalone.: Source.
Let’s looks at one more example:
<section class="container">
<article class="item-in-container">
<h2>Title of Article 1</h2>
</article>
<article class="item-in-container">
<h2>Title of Article 2</h2>
</article>
<article class="item-in-container">
<h2>Title of Article 3</h2>
</article>
</section>
In the code above, we now have these h2 elements nested inside of the articles. It’s important to know that h2 is not a child of the section. It is technically a grandchild of the section, and a child of article. In other words, the articles are direct children of section, just as h2 is a direct child of article The idea of direct child is really important to understand as we work with Flexbox.
There is more to learn about Flexbox, but we can do a lot with what we know. It will take a while to get used to; remember to use your Dev Tools and use that borderproperty to help you understand what space each element is taking up.
Your job will be to update the CSS (you'll probably need to add some classes on some HTML elements, too!) so the outcome looks like the screenshot below, but first, take some time to jot down some notes about how you will approach this.
Hint 1
To move the red group of boxes, the green group of boxes, the blue group of boxes, and the purple group of boxes, use the following code in index.html to group the boxes by color:
<section class="red-g">
// The existing code for the red boxes
</section>
<section class="green-g">
// The existing code for the green boxes
</section>
<section class="blue-g">
// The existing code for the blue boxes
</section>
<section class="purple-g">
// The existing code for the purple boxes
</section>
Together,
<section class="boxes">
<section class="red-g"> // Grouping the red boxes
<article class="red">1</article>
<article class="red">2</article>
<article class="red">3</article>
</section>
<section class="green-g"> // Grouping the green boxes
<article class="green">1</article>
<article class="green">2</article>
<article class="green">3</article>
</section>
<section class="blue-g"> // Grouping the blue boxes
<article class="blue">1</article>
<article class="blue">2</article>
<article class="blue">3</article>
</section>
<section class="purple-g"> // Grouping the purple boxes
<article class="purple">1</article>
<article class="purple">2</article>
<article class="purple">3</article>
</section>
</section>
More Practice
Scrimba offers a free course that is under an hour long. This might be a great watch if you’re struggling to understand Flexbox!
Made with Bullet