CSS - Flexbox

Instructors: Jess, Carmen, and Eda

Flexbox

Before this session, please:

• Read Working with CSS Flexbox: What Is CSS Flexbox, and When Should You Use It? and take notes
• Read Working with CSS Flexbox: What Are Some Common Flex Properties, and How Do They Work? and take notes
• Try to complete all the steps from Build a Flexbox Photo Gallery to begin to get an understanding of flexbox
• Try to complete as much of Design a Set of Colorful Boxes as you can, to reinforce your understanding of flexbox. You may need to finish this over the next few days
• Complete Design a Pricing Plans Layout Page solo over the next few days
• Read CSS Flexbox Review and take notes
• Complete CSS Flexbox Quiz solo to test your knowledge of flexbox
• Spend the next few days or weeks completing Build a Page of Playing Cards. Certification projects should show as much of your skill and style as possible.

During this session, we’ll:

• Review notes
• Review notes
• We’ll work through steps from Build a Flexbox Photo Gallery together to explore how flexbox works
• We’ll review key concepts from Design a Set of Colorful Boxes together
• We’ll answer your questions for how to approach Design a Pricing Plans Layout Page but won’t go over this lab in detail in class, to help you begin approaching projects more independently
• Review notes
• We’ll talk through how you might want to approach Build a Page of Playing Cards, to help prepare you to complete this certification project on your own

After this session, please:

• Read Working with CSS Fonts: What Are the Fundamentals of Typography? and take notes
• Read Working with CSS Fonts: What Are Some Best Practices for Working with Typography in Your Designs? and take notes
• Read Working with CSS Fonts: What Are Font Families and How Do They Work? and take notes
• Read Working with CSS Fonts: What Are Web Safe Fonts? and take notes
• Read Working with CSS Fonts: What Is the @font-face At-Rule, and How Does It Work? and take notes
• Read Working with CSS Fonts: How Do You Work with External Fonts Like Font Squirrel and Google Fonts? and take notes
• Read Working with CSS Fonts: What Is the text-shadow Property, and How Does It Work? and take notes
• Try to complete as many steps from Build a Nutritional Label as you can before class, you may need to finish this over the next few days
• Complete Build a Newspaper Article solo over the next few days
• Read CSS Typography Review and take notes
• Complete CSS Typography Quiz solo to test your knowledge of typography and CSS

Instructor notes

Working with CSS Flexbox: What Is CSS Flexbox, and When Should You Use It?

Flexbox is a one-dimensional layout method that lets us arrange items in rows or columns. Because items expand to fill additional space or shrink to fit into smaller spaces, it’s helpful for us to create responsive websites that can adapt to different screen sizes and orientations.

The two concepts related to flexbox are:

• flex container
• flex item

Within a flex container, we can arrange elements. To make an element a flex container, we can define its display property with the value flex:

1.container {
2  display: flex;
3}

A flex item is a direct child of a flex container. For items aligned on the horizontal axis, setting their width will not make them “flex"ible. (Likewise, for items in the vertical axis, defining the height will not make them flexible.)

A flex container is a block-level element. It has two axes:

• the main axis
• the cross axis

Flex items are arranged in the direction of the main axis. The main axis is by default horizontal, and the cross axis is vertical. The cross axis is perpendicular to the main axis.

With the flex-direction, we can change the direction of the main axis. The default value is row, but we can set it to row-reverse, column, or column-reverse.

Working with CSS Flexbox: What Are Some Common Flex Properties, and How Do They Work?

There are some commonly used flex properties:

• flex-wrap defines how items are wrapped within a flex container to fit the available space. It can take the values nowrap (the default), wrap, and wrap-reverse.
• flex-flow is a shorthand for defining flex-direction and flex-wrap.

1main {
2  display: flex;
3  flex-flow: column wrap-reverse;
4}

• justify-content aligns the child items along the main axis. The common values are flex-start, flex-end, center, space-between, space-around, space-evenly, and stretch.
• align-items aligns the child items along the cross axis. The values are similar to those of justify-content.
• align-self is defined on an individual flex item. The values are similar to those of justify-content and align-items.

Build a Flexbox Photo Gallery

With this exercise, we’re going to practice designing with flexbox!

Design a Set of Colorful Boxes

We’ll take a look at this workshop that goes over flexbox and color theory concepts that we’ve learned.

Design a Pricing Plans Layout Page

We’ll briefly answer your questions (if any!) related to this exercise, which goes over the topics we’ve learned so far.

CSS Flexbox Review

In this unit, we’ve mainly explored:

• Introduction to CSS flexbox and flex model
• The flex-direction property
• The flex-wrap property
• The justify-content property
• The align-items property

Build a Page of Playing Cards

The first certification project of the CSS section is a fun exercise to practice all we’ve learned so far!