Flexbox Layout Assignment 2

Form Row Using Flexbox

Row With One Wider Column

Sidebar 1

Smaller sidebar content on the left.

Main Content

This main column is wider than the sidebars using a larger flex value.

Sidebar 2

Another smaller sidebar on the right.

Row With Equal Width Columns

Feature One

All three boxes share the available width equally.

Feature Two

Flex 1 on each item creates equal-width columns.

Feature Three

Flexbox also keeps the column heights consistent.

Row With Nested Column Rows (Example #6 Style)

Main Text Column

This column controls the overall height of the section. The column on the right will always split its height evenly between the blue and green boxes.

Top Box
Bottom Box