Bootcamp
Search…
CSS.3.1: Flexbox Layout

Column Layouts

When trying the examples, be sure to resize the width of the screen to see how the boxes behave dynamically.

Equal Column Layout

This is the basic flexbox column layout example. Every column div will divide itself equally across the width of the page.
.container {
display: flex;
}
.flex1 {
/* same as: flex:1; */
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
background-color: white;
border: 2px solid green;
}
<div class="container">
<div class="flex1">
Nisi fugiat incididunt esse sint id nulla fugiat duis qui nisi. Velit
culpa nisi ipsum aliqua ullamco sunt sint cillum et. Duis aute ad
exercitation sit.
</div>
<div class="flex1">
Nisi fugiat incididunt esse sint id nulla fugiat duis qui nisi. Velit
culpa nisi ipsum aliqua ullamco sunt sint cillum et. Duis aute ad
exercitation sit.
</div>
</div>

Shrunk Column Layout

We can change the default style to make one column smaller by changing the flex-shrink property. This shrinks one column smaller than the other.
.container {
display: flex;
}
.col {
background-color: white;
border: 2px solid green;
}
.flex1 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
.flex2 {
flex-grow: 0;
flex-shrink: 2;
flex-basis: auto;
}
<div class="container">
<div class="col flex1">
Nisi fugiat incididunt esse sint id nulla fugiat duis qui nisi. Velit
culpa nisi ipsum aliqua ullamco sunt sint cillum et. Duis aute ad
exercitation sit.
</div>
<div class="col flex2">
Nisi fugiat incididunt esse sint id nulla fugiat duis qui nisi. Velit
culpa nisi ipsum aliqua ullamco sunt sint cillum et. Duis aute ad
exercitation sit.
</div>
</div>

Unequal Column Take Up Space

A magical property of flexbox is that it knows how to tell boxes to take up the rest of the available space. We set the flex-grow property to tell it to grow to fit the rest of the parent. If there is any horizontal space left, the right box will take it up.
.container {
display: flex;
}
.col {
background-color: white;
border: 2px solid green;
}
.flex1 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
.take-up {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
<div class="container">
<div class="col flex1">Duis aute ad exercitation sit.</div>
<div class="col take-up">Nisi fugiat.</div>
</div>

Fixed Max Width Column

We can fix the maximum dimensions of a box with the flex-basis style. The left column will never take up more than 200px width. This measurement can also be set with other units.
.container {
display: flex;
}
.col {
background-color: white;
border: 2px solid green;
}
.fixed-w {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 200px;
}
.flex1 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
<div class="container">
<div class="col fixed-w">
Nisi fugiat incididunt esse sint id nulla fugiat duis qui nisi. Velit
culpa nisi ipsum aliqua ullamco sunt sint cillum et. Duis aute ad
exercitation sit.
</div>
<div class="col flex1">
Nisi fugiat. culpa nisi ipsum aliqua ullamco sunt sint cillum et. Duis
aute ad exercitation sit.
</div>
</div>
There is a difference when setting flex-basis for column and for height
Read more about it here​

Flex Sizing

Vertical Centering

Finally, we can vertically center something with flexbox. Note however, that this is not a panacea. The height of the container must be explicitly set, and the box inside must also have it's dimensions set.
.vertical-container {
height: 60vh;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid black;
}
.centered {
width: 300px;
background-color: white;
border: 2px solid green;
}
<div class="vertical-container">
<div class="centered">
Dolor deserunt ad sunt amet laborum consectetur eu nulla exercitation
magna tempor id consequat. Dolore mollit sit incididunt et sint pariatur
duis esse eu commodo duis consequat sit. Nulla reprehenderit quis labore
et. In sint nostrud deserunt id ea commodo id exercitation id dolore
laboris id consequat esse. Enim laborum labore anim voluptate. Ex esse
officia quis reprehenderit tempor anim eiusmod aliqua commodo. Velit
esse dolor sit est.
</div>
</div>

Further Reading

Flexbox in 100 Seconds video here​