W3.CSSLesson 13Free preview

W3.CSS Flex Helpers

This lesson is part of W3.CSS · All levels

Summary

A flex helper is a small set of settings that perfect the flexbox, such as item alignment, space division, and line packing. With the helper you don't have to write CSS properties one by one because W3.CSS already provides it. This page shows how to arrange the main and cross-axes with just the class.

Key points

The main axis of the flex default horizontal, the cross axis is perpendicular to it
The main axis alignment regulates the distribution of space between items
The cross-axis alignment determines the position of the item against the height of the container
Items can be given a flexible space magnification with a flex value
Packaging is used when items have to drop a line on a narrow screen

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.