From the course: CSS Essential Training

Unlock the full course today

Join today to access over 24,100 courses taught by industry experts.

Intro to Flexbox

Intro to Flexbox - CSS Tutorial

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

Intro to Flexbox

“

- [Instructor] Historically, float, and sometimes display and position, were used to create various page layouts. While there are still uses for these properties the flexible box layout, or flexbox for short, has introduced more ways for aligning and sizing elements. Let's dive into flexbox, beginning with the terminology. The flex container refers to the parent element. The flex items refer to only the child elements within the flex container. Flex items are laid out along the main axis. The direction is horizontal by default, so the flex items are arranged in rows, but the direction of the main axis can be changed to run vertically in columns using the flex direction property set to column. The cross axis will always run perpendicular to the direction of the main axis. Both axes also have start and endpoints, main start and main end for the main axis, cross start and cross end for the cross axis. To use flexbox, the…

Contents