From the course: CSS Layouts: From Float to Flexbox and Grid

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Nesting flex containers

Nesting flex containers - CSS Tutorial

From the course: CSS Layouts: From Float to Flexbox and Grid

Start my 1-month free trial

Nesting flex containers

- [Insructor] Flexbox is primarily used to layout flex items in a single axis. But we can create the look of rows and columns by wrapping the flex items. We can also nest flex containers to create more complex layouts. A flex item can also be a flex container for its child elements. The flex items in the nested flex container can be arranged along the same or opposite axis of its parent flex container. Let's look at an example in CodePen. In this example, the page-wrap container has two child elements, the aside and main elements. The main element also contains some child elements but we'll get to that a little bit later. Let's start by adding display: flex to the page-wrap. Now the aside and the main elements are the flex items within the page-wrap container and are arranged side-by-side in rows. Now, let's define the size of the aside and main elements with the flex property. Let's add in the styles in line 9 and line…

Contents