Chapter 1: Flexbox, part 1

28 tasks ,3 challenges and 1 summary  

We will consider the basics of flexboxes, which provide a new way of creating “flexible” layouts. First, we will learn how to establish the direction of flow of flex container axes and to align and overflow flex items with the kitties, and then we will learn how to apply a flexbox simply and easily within real interfaces.

Get access
The display: flex property, flex item Task
The flex-direction property, main axis Task
The flexbox cross axis Task
The justify-content property, alignment along the main axis Task
The justify-content property: flex-start | flex-end Task
The justify-content property: space-between | space-around Task
The align-items property, alignment along the cross axis Task
The align-items property: flex-start | flex-end Task
The align-items: baseline property Task
The align-self property, or selfish alignment Task
The align-self: baseline property Task
Test: Creating a simple palette Challenge
The flex-wrap property, overflow of flex items Task
The flex-wrap property, reverse overflow Task
The align-content property, alignment of flex container lines Task
The align-content property: stretch and align-items Task
The align-content property: non-stretch and align-items Task
The align-content property, remaining values Task
The order property, the sequence number of the flex item Task
Test: Creating a more complicated palette Challenge
Perfect centering by assigning margin: auto to the flex container Task
Perfect centering, flex alignment Task
The adaptive horizontal menu, part 1 Task
The adaptive horizontal menu, part 2 Task
The adaptive horizontal menu, part 3 Task
The vertical row of icons Task
The vertical row of icons, part 2 Task
The vertical row of icons, part 3 Task
Ordering elements with CSS Task
Vertically aligning blocks using a flexbox Task
Test: Complex palettes Challenge
Summary of “Flexbox, Part 1” Summary