CSS properties and FlexBox
CSS Flexible Box Layout
Learning Objectives
This lesson provides an overview of the CSS Flexible Box Layout, commonly referred to as "flexbox." By the end of this lesson, learners will be able to:
Apply the following flexbox properties and values to HTML pages:
flex
justify-content
align-items
align-content
flex-wrap
flex-direction
flex-grow
order
Table of Contents
CSS Flexible Box Layout.
Flexbox Auto Margins
Flexbox Properties:
Justify-Content
Align-Items
Align-Content
Flex-Grow
Flex-Direction
Flex-Wrap
Flex-Flow
Order
CSS Flexible Box Layout
The CSS Flexible Box Layout (flexbox) was designed to achieve a complex layout model that the traditional float and position properties could not achieve easily. It is a one-dimensional layout method for arranging items into rows or columns. Items flex by expanding or shrinking to fit their available space.
A flexbox consists of various properties that help us define two types of boxes:
Flex Containers have one or more flex items within them, and define how these flex items are positioned, ordered, and wrapped.
Flex Items contain the content itself.
For example, a
container can be made into a flex container by providing the display property with a value of flex when styling the container. Any container inside is then considered a flex item.
Activity: Basic Flexbox
We will use Flexbox to design the following box layout in HTML with CSS.
The Flex model
Create a file called flexbox-examples.html.
Create a $\langle$ div $\rangle$ with class container.
Create eight $\langle$ div $\rangle$ elements with class boxes.
a) Each
will have an id of boxN, where $\mathbf{N}$ is an incrementing number from 1 to 8, e.g. box1, box2, box3, etc.
number inside of it.
The CSS to the right can be added to a
Completed File Download
Flexbox: Auto Margins
You can use auto margins for main-axis alignment. Auto margins will take up all of the space that they can in their axis.
margin-left: auto
The example to the right shows the left margin set to auto on the yellow box, pushing it and the pink box to the far right of the container.
margin-right: auto
The example to the right shows the right margin set to auto on the yellow box, pushing the pink box to the far right of the container.
Flexbox Properties: Justify-Content
The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of a flex container.
flex-start
The items are packed flush to each other toward the edge of the alignment container depending on the flex container's main-start side. This only applies to flex layout items. For items that are not children of a flex container, this value is treated like start.
flex-end
The items are packed flush to each other toward the edge of the alignment container depending on the flex container's main-end side. This only applies to flex layout items. For items that are not children of a flex container, this value is treated like end.
Flexbox Properties: Justify-Content (continued)
The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of a flex container.
center
The items are packed flush to each other toward the center of the alignment container along the main axis.
space-between
The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.
Flexbox Properties: Justify-Content (continued)
The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of a flex container.
space-around
The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items.
space-evenly
The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.
Activity: Navigation Bar Alignment - Part One
Use the provided navigation.html file to recreate the following layouts. Note that by adding display:flex to the $\langle u l\rangle$ element, the $\langle u l\rangle$ element becomes our flex container, and each $\langle\mathbf{l i}\rangle$ element is a flex item.
Link1
Activity: Navigation Bar Alignment - Part Two
Use the provided navigation.html file to recreate the following layouts. Note that by adding
element is a flex item.
Flexbox Properties: Align-Items
The CSS align-items property sets the align-self value on all direct children of the element. In flexbox, it controls the alignment of items on the cross axis.
flex-end
The cross-end margin edges of the flex items are flushed with the cross-end edge of the line.
center
The flex item margin boxes are centered within the line on the cross axis. If the cross-size of an item is larger than the flex container, it will overflow equally in both directions.
stretch
Flex items are stretched such that the cross-size of the item's margin box is the same as the line, while respecting width and height constraints.
Flexbox Properties: Align-Content
The CSS align-content property sets distribution of space between and around content items along a flexbox cross axis or a grid's block axis.
space-between
The spacing between each pair of adjacent elements is the same. The first item is flush with the start edge of the alignment container in the cross axis, and the last item is flush with the end edge of the alignment container in the cross axis.
space-around
The spacing between each pair of adjacent elements is the same. The empty space before and after the last item equals half of the space between each pair of items.
space-evenly
The spacing between each pair of adjacent items, the start edge and the first item, and the end edge and the last item, are all exactly the same.
Flexbox Properties: Flex-Grow
The CSS flex-grow property sets the flex grow factor of a flex item's main size.
Elements within the container split the remaining space of their container by a ratio of their assigned flex-grow values.
flex-grow: 1
When all elements are assigned an equal value of one, they split the space of their container evenly.
flex-grow: 2
When one element is set to flex-grow: 2 , in the case of the example to the right, it occupies $2 /(1+2+1)$, or $50 %$, of the available space.
flex-grow: ...
These values can be whatever you want to create the layout of your choice.
Flexbox Properties: Flex-Direction
The CSS flex-direction property sets how items are placed in the flex container, defining the main axis and the direction (normal or reversed).
row
The flex container's main axis is defined to be the same as the text direction. The main-startpoint and the main-endpoint are the same as the content direction.
row-reverse
Behaves the same as row, but the main-startpoint and the main-endpoint are opposite.
column
The flex container's main axis is the same as the block axis. The main-startpoint and main-endpoint are the same as the before and after points of the writing mode.
column-reverse
Behaves the same as column, but the main-startpoint and main-endpoint are opposite. 
Flexbox Properties: Flex-Wrap
The CSS flex-wrap property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
nowrap
Without flex wrapping, flex items can be squished into one line within their parent. wrap
With wrapping enabled, if a box does not fit within the remaining space, it will be placed on a new line.
wrap-reverse
A reverse wrap behaves the same way as a regular wrap, but the cross-start and cross-end are permuted. 
Flexbox Properties: Flex-Flow
The CSS flex-flow property specifies the direction of a flex container, as well as its wrapping behavior. flex-flow is a shorthand property that represents both flex-direction and flex-wrap.
A complete flex-flow value includes:
$>\mathrm{A}$ flex-wrap value: nowrap wrap wrap-reverse
A flex-direction value:
row
row-reverse
column
Initial Order
Reversed
column-reverse
Activity: Flexbox Layout
Use what you have learned to create the following layout. 
Flexbox Properties: Order
The CSS order property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order values, and then by their order within the source code.
By setting an order value on elements within a flex container, you can organize those elements via CSS without editing the HTML structure.
For example, the following layouts can all be achieved with the exact same HTML source code by changing the order value for the orange block.
Default
| 1 | 2 | 3 | 4 | 5 | | :--- | :--- | :--- | :--- | :--- | order: 6
or
order: $\theta$
order: 2
Flexbox Example: Basic Card
The following HTML and CSS show how to create a basic card structure using flexbox.
Heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet distinctio ipsam sapiente! Aliquid corporis doloremque eius eveniet inventore libero magni, nulla quia quo ratione reiciendis saepe similique sint, sunt. lorem
Basic Card Code Break Down
The HTML code contains two 〈div $\rangle$ elements. The first div is the container and has a class attribute of card-body. It holds the image and text for the card.
The second div has a class attribute of img-container and holds the image for the card. Inside the img-container class is an image for demonstration purposes only.
The CSS code starts with the card-body class, and has a border shorthand property and a width value of $300 p x$.
The img-container class is using a descendant selector to select the img with class img-container. It has a max-width of one hundred percent $(100 %)$ with a height of auto, which will help with responsiveness.
The card-body $\mathrm{p}$ and $\mathrm{h}$ tags both have margins of $8 \mathrm{px}$ to give space to the text.
Activity: Flexbox Basic Cards
Using what you have learned, create the following layout using the card example from previous slides.
The Flex model
Practice Assignment: Design an Online Resume Using HTML and CSS
Please follow the link below to the practice assignment for designing an online resume using HTML and CSS.
PA - 307.4.1 - Design an Online Resume using HTML and CSS
You can also find this assignment on Canvas under the Assignments section.
If you have technical questions while performing the activity, ask your instructors for assistance.
When you are finished with your assignment, you can continue practicing your flexbox skills by visiting the following resource: https://flexboxfroggy.com/
Knowledge Check
Name three of the five values for the justify-content property.
-What do auto margins do?
Name two values for align-items property.
Name two values for align-content property.
What does the flex-grow property control?
What does the flex-direction property do?
What is flex-wrap, and how is it used?
-What is flex-flow a shorthand property for?
Why is the order property useful for content organization?
Summary
In this lesson, we explored the CSS Flexible Box Layout, commonly referred to as "flexbox." The CSS Flexible Box Layout is a powerful tool for organizing content on a webpage via CSS properties. Elements can be aligned along the main axis via the justify-content property, and aligned along the cross axis via the align-items and align-content properties, and include:
The flexbox properties and values can be applied to HTML pages:
The flex-grow property can be used to control the relative size of items in their containers.
The flex-direction and flex-wrap properties, combined within the shorthand flex-flow property, can be used to modify the way items order themselves within their containers.
The order property can further modify the order of individual items within a container.
Questions?
Last updated