Understanding CSS Flexbox

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
- 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.

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

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.

.container {
display: flex;
flex-wrap: nowrap; /** default property. all profile pictures will be on one line **/
}

.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.

.container {
height: 50vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
border: 1px solid black;
}

.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;
}

.container {
height: 50vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border: 1px solid black;
}

.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;
}
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!