8 Flexbox Layouts You Should Know
Modern CSS layouts commonly used when building UI components
01. Super Centering
Center items with three properties display: flex;
justify-content: center;
and align-items: center;
If your text wraps multiple lines, then don’t forget text-align: center;
/* CSS */
.ex1 {
display: flex;
justify-content: center;
align-items: center;
}/* HTML */
<div class="blue box ex1">
<div class="coral item">Super Centering</div>
</div>
02. Left and Right
Use justify-content: space-between;
and two container elements to create a left and right element.
/* CSS */
.ex2 {
display: flex;
justify-content: space-between;
}/* HTML */
<div class="blue box ex2">
<div class="coral item">
<span class="pink item">Logo</span>
</div>
<div class="coral item">
<span class="pink item">Link 1</span>
<span class="pink item">Link 2</span>
</div>
</div>
03. Left, Right, and Perfectly Centered
Use the flex-basis: 0;
and flex-grow: 1;
CSS attributes on both the left and right elements to keep an element centered between two elements, even when the left and right elements are different sizes. A common mistake is to try using justify-content: space-between;
However, this will not keep the Title centered when the left and right elements are different sizes.
Note: for smaller screen sizes you will need to handle overflow
to keep the left and right elements shrinking at the same rate. Alternatively, you can consider a different layout for smaller screen sizes.
/* CSS */
.ex3 {
display: flex;
align-items: center;
}.ex3 > .left,
.ex3 > .right {
flex-basis: 0;
flex-grow: 1;
}.ex3 > .left {
display: flex;
}.ex3 > .right {
display: flex;
justify-content: flex-end;
}/* HTML */
<div class="blue box ex3">
<div class="coral item left">
<span class="pink item">:)</span>
</div>
<div class="coral item">Title</div>
<div class="coral item right">
<span class="pink item">Link 1</span>
<span class="pink item">Link 2</span>
<span class="pink item">Link 3</span>
<span class="pink item">Link 4</span>
</div>
</div>
04. Even Columns
Use flex-basis: 100%;
to make all the items the same width, regardless of the number of items in the flex container.
/* CSS */
.ex4 {
display: flex;
}.ex4 > .item {
flex-basis: 100%;
}/* HTML */
<div class="blue box ex4">
<div class="coral item">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, quos?
</div>
<div class="coral item">Item 2</div>
<div class="coral item">Item 3</div>
<div class="coral item">Item 4</div>
</div>
05. Vertically Center Icons and Text
Use display: flex;
and align-items: center;
to keep two items vertically centered.
/* Example 5 */
.ex5 {
display: flex;
align-items: center;
}.ex5 > input[type=’radio’] flex-shrink: 0;
margin-right: 1rem;
}.ex5 > .item {
flex-grow: 1;
}/* HTML */
<label class="blue box ex5" for="long">
<input type="radio" id="long" value="long" name="size" />
<span class="coral item">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias,molestiae. Possimus laboriosam facere expedita soluta dolorum recusandae excepturi rem quam error asperiores, iste consequatur unde voluptas ex id maxime ut.
</span>
</label>
<label class="blue box ex5" for="short">
<input type="radio" id="short" value="short" name="size" />
<span class="coral item">Lorem, ipsum</span>
</label>
06. Header, Content, and Footer
Stretch content and push the footer to the bottom of a fixed height container using flex-grow: 1
on the content element.
/* CSS */
.ex6 {
display: flex;
flex-direction: column;
height: 500px;
}.ex6-content {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}/* HTML */
<div class="blue box ex6">
<div class="coral item">Header</div>
<div class="pink item ex6-content">Content</div>
<div class="coral item">Footer</div>
</div>
07. Alternating Rows
Leverage the order
CSS attribute to change the order of elements on the webpage. Notice, the order in HTML is the same but on the webpage the order is different.
/* CSS */
.ex7 > .row {
display: flex;
align-items: center;
gap: 1em;
width: 100%;
}.ex7 > .row > p {
flex-grow: 1;
}.ex7 > .row:nth-child(2n) > span {
order: 2;
}/* HTML */
<div class="blue box ex7">
<div class="item coral row">
<span class="item pink">:(</span>
<p class="item yellow">
Potter, do something. Tell them I mean no harm
</p>
</div>
<div class="item coral row">
<span class="item pink">:)</span>
<p class="item yellow">
I'm sorry professor. But I must not tell lies.
</p>
</div>
<div class="item coral row">
<span class="item pink">:(</span>
<p class="item yellow">!?</p>
</div>
<div class="item coral row">
<span class="item pink">:)</span>
<p class="item yellow">Farewell, milady</p>
</div>
</div>
08. Custom Label Placements
Expose 4 different label placements (end, start, top, bottom) by changing one line of CSS.
/* CSS */
.ex8 {
display: flex;
}.ex8 > label {
display: flex;
align-items: center;
flex-basis: 100%;
}.ex8 .item[for='start'] {
flex-direction: row-reverse;
}.ex8 .item[for='top'] {
flex-direction: column-reverse;
}.ex8 .item[for='bottom'] {
flex-direction: column;
}/* HTML */
<div class="blue box ex8">
<label class="coral item" for="end">
<input
type="radio"
id="end"
value="end"
name="labelPlacement"
/>
<span class="pink item">End</span>
</label>
<label class="coral item" for="start">
<input
type="radio"
id="start"
value="start"
name="labelPlacement"
/>
<span class="pink item">Start</span>
</label>
<label class="coral item" for="top">
<input
type="radio"
id="top"
value="top"
name="labelPlacement"
/>
<span class="pink item">Top</span>
</label>
<label class="coral item" for="bottom">
<input
type="radio"
id="bottom"
value="bottom"
name="labelPlacement"
/>
<span class="pink item">Bottom</span>
</label>
</div>
Additional Resources:
- CodeSandbox with all examples — https://codesandbox.io/s/8-flexbox-layouts-you-should-know-brw5h