The CSS flex property controls a flex item’s size along its container’s main axis, normally its width. It combines flex-grow, flex-shrink, and flex-basis in one declaration. section 4.2 section 4.5
For proportional columns, flex: 2 and flex: 1 give the columns flex bases of 0%, then distribute the available remainder in a two-to-one ratio. Gaps and margins reduce that remainder. section 4.2 section 4.2.2
Two-column page layout
Apply display: flex to the container, then assign relative weights to its children: .flex { display: flex; gap: var(--gap-size); } .column-main { flex: 2; } .column-sidebar { flex: 1; } The main column becomes twice as wide as the sidebar, and both grow to fill the available container width. section 4.2 section 4.2.2
Use flex to express several sizing patterns:
- Give items different proportions by assigning different flex-grow weights. section 4.2.2
- Combine fixed-width side columns with a fluid center column. section 4.2.4
- Build reusable grid systems with preset column classes. section 4.2.4
Listing 4.7 Using the flex property to set column widths
.column-main {
flex: 2;
}
.column-sidebar {
flex: 1;
}
Inspect the two-column CSS listing showing how flex weights produce proportional main and sidebar columns. section 4.2
