Understanding CSS Flexbox

Jide Lambo.
codeburst
Published in
5 min readNov 12, 2017

Have you been wondering how best to arrange elements with flexbox? If you can't stand CSS Float hacks, then lets dive in and learn how to work with Flexbox.

What is Flexbox?

Let’s take note of two important elements that work with Flexbox properties; Flex Container and Flex Item.

Flex Container is obviously set to be the parent element while the Flex Items are the Flex container’s direct children element.

Therefore, Flexbox layout gives the Flex container the ability to adjust it’s Flex Items’ width and height to accommodate available space for all kinds of display devices and screen sizes.

With the above being said, there are one or more flex items inside a flex container.

Flexbox properties on Flex Container

  1. Display: Flex

In the image below, we have four boxes and by default, each box is a block element; that is, they ought to occupy a full-width of a line. Flexbox enables the flex properties on all the container’s direct children (i.e, the four boxes) and the four boxes are displayed inline.

.container {
display: flex;
}

2. Flex Direction

Often times we have tried aligning menu list items vertically or horizontally. We then have to use list items, then have the Unordered list’s css property as display-inline.

But with Flex-direction on the Flex Container, it can help us specify the alignment direction of our Flex Items inside the container (ie, left to right Or right to left). The following are properties of flex-direction:

row, row-reverse, column, and column-reverse.

display: flex;
flex-direction: column;
.container {
display: flex;
flex-direction: column; /** lays the Flex Items vertically from top to bottom **/
}
display: flex;
flex-direction: row;
.container {
display: flex;
flex-direction: row; /** Places the Flex Items from left to right **/
}

3. Flex Wrap

Let us assume we have a gallery of 12 profile pictures on our team’s page, we’re either left with the options of having all 12 images in a row or have images wrap down onto other rows.

With Flex-wrap, we can make all images stay on one line or wrap onto another line easily. The following are properties of flex-wrap:

nowrap, wrap, and wrap-reverse.

images are not wrapped to another line and this looks terrible
.container {
display: flex;
flex-wrap: nowrap; /** default property. all profile pictures will be on one line **/
}
images will wrap onto new lines
.container {
display: flex;
flex-wrap: wrap; /** images will wrap onto another line if necessary, from top to bottom **/
}

4. Justify Content

We have the following properties of Justify-content:

flex-start, flex-end, center, space-around, and space-between.

.container {
display: flex;
justify-content: flex-start;
border: 1px solid black;
}
.container {
display: flex;
justify-content: flex-end;
border: 1px solid black;
}
.container {
display: flex;
justify-content: center;
border: 1px solid black;
}
.container {
display: flex;
justify-content: space-between;
border: 1px solid black;
}
.container {
display: flex;
justify-content: space-around;
border: 1px solid black;
}

5. Align Items

Just like justify-content, align-items helps us align flex items on the cross-axis, which is vertically from top to bottom and in some cases from bottom to top.

We have the following properties of align-items:

flex-start, flex-end, center, stretch, and baseline.

cards align on the top of the cross-axis
.container {
height: 50vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
border: 1px solid black;
}
cards align on the end of the cross-axis
.container {
height: 50vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
border: 1px solid black;
}
.container {
height: 50vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
border: 1px solid black;
}
cards are of different heights but they still align at the center
.container {
height: 50vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border: 1px solid black;
}
Flex item img height has to be set to auto else the height property will override the stretch property.
.container {
height: 50vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
border: 1px solid black;
}

Flexbox Examples

<div class="wrapper">
<div class="card card-1">1</div>
<div class="card card-2">2</div>
<div class="card card-3">3</div>
<div class="card card-4">4</div>
</div>
.wrapper {
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
border: 1px solid black;
}
.card {
display: flex;
justify-content: center;
align-items: center;
width: 120px;
height: 120px;
background-color: green;
margin: 10px;
color: #fff;
font-size: 36px;
font-weight: 600;
}
.card-1 {
background-color: red;
}
.card-2 {
background-color: brown;
}
.card-3 {
background-color: purple;
}
.card-4 {
background-color: green;
}
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;

2)

.wrapper {
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
border: 1px solid black;
}
.card {
display: flex;
justify-content: center;
align-items: center;
width: 120px;
height: 120px;
background-color: green;
margin: 10px;
color: #fff;
font-size: 36px;
font-weight: 600;
}
.card-1 {
background-color: red;
}
.card-2 {
background-color: brown;
}
.card-3 {
background-color: purple;
}
.card-4 {
background-color: green;
}

Conclusion

We have discussed the flexbox properties on the Flex Container and the impact it has on aligning flex items. I hope to get more into the Flexbox properties on Flex Items in subsequent articles.

If this article has been helpful to you, kindly give some green clap below or drop a comment.

Thank you for reading!

Published in codeburst

Bursts of code to power through your day. Web Development articles, tutorials, and news.

Responses (3)

What are your thoughts?