WDD 130: Web Fundamentals

W04 Learning Activity: CSS Flex

Overview

The flex CSS display property makes creating and controlling responsive layouts easy especially in a single horizontal or vertical container.

Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.

Prepare

CSS Flexbox makes vertically centering a block of content inside its parent easier. The children of a flex container work together to fill the available, designed space.

• Open, review, and render the following example application of using CSS Flex – flexbox.html and flexbox.css files in the week04 folder.
• Video Demonstration: ▶️ CSS Flexbox Basics [ 3:01 minutes ]
  
• Open, review, and render the following example application of using CSS Flex in a navigation bar – Example: Open the flexbox-menu.html and flexbox-menu.css files in the week04 folder.
• Video Demonstration: ▶️ Using CSS Flexbox on a Menu [ 1:33 minutes ]
  

Key Concepts

• Flex containers and flex items: The container is the parent and has the display: flex; declaration. The items are the direct children of the container and can be manipulated using various flex properties.
• Flex direction: The flex-direction property defines the direction in which the flex items are placed in the flex container. It can be set to row, row-reverse, column, or column-reverse.
• Justify content: The justify-content property aligns the flex items along the main axis (horizontally in a row, vertically in a column). It can be set to values like flex-start, flex-end, center, space-between, or space-around.
• Align items: The align-items property aligns the flex items along the cross axis (vertically in a row, horizontally in a column). It can be set to values like flex-start, flex-end, center, baseline, or stretch.
• Place items: The place-items property is a shorthand for align-items and justify-items. It can be used to control the alignment of items within a grid container.

Activity Instructions

1. Complete the following online tutorial on CSS Flexbox (24 Levels): Flexbox Froggy