Ajayi Emmanuel Tomiwa

Posted on Jan 29, 2021

The Ultimate Display Flex ⚡.

#codenewbie #css #flexbox #firstpost

Hii guys :)... This is my first article and I’ll love to hear your feedback (drop a like and comment 🥺). Shoutout to GeekTutor and my friends for the motivation to finally write this article 😂.

Today I’ll be talking about a very important tool that I think has revolutionized front-end development… The Ultimate display: flex;... argue with your keyboard.

Display flex is a CSS display property used to arrange elements in a particular container. It literally lives up to it's name allowing elements of a particular container (parent element) to flex. Before the advent of display flex front-end developers created web layout through the use of float property some even went as far as using html tables to arrange elements with rows and columns on the web page. This made front-end development at that time very difficult, but then CSS3 came out with a new display property called display flex which made building layouts easier...

Fun fact: Bootstrap's grid system was built using display flex🏂

This might be a long read. But there's a special package at the end waiting for those who read to the end 😗

Let’s Code🚀

Not too much talk, let's get to code… sit back and relax as I show you how to flex with flexbox.

Prerequisite: A basic understanding of HTML and little knowledge of CSS.

Let's build a simple HTML structure for our tutorial...

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="flex.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="box box-1">Box 1</div>
      <div class="box box-2">Box 2</div>
      <div class="box box-3">Box 3</div>
    </div>
  </body>
</html>

Here we have a single div container with the other divs with a common class, box.

Let create a css file and add a little `css` to remove default stylings with the `*` selector and add color to the page.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  width: 90vw; /* make container take 90% of every screen size */
  margin: 2rem auto; /*center the container with margin auto*/
  border: 1px solid #302305;
  padding: 1rem;
}

.box {
  background-color: rgb(245, 166, 35);
  border-radius: 5px;
  padding: 3rem;
}

Here is the result of our code:

By default div is a block element so it takes the full width of its container, but flexbox alters this... What do I maen by this? Read on🏂...

Add the css property `display: flex;` to the container div

.container {
  width: 90vw; /* make container take 90% of every screen size */
  margin: 2rem auto; /*center the conatiner with margin auto*/
  border: 1px solid #302305;
  padding: 1rem;

  /* flex boxes with display: flex; */
  display: flex;
}

Result:
Now what happened here was the flex property altered the elements inside the container by arranging them side by side along two planes... the main axis (x) and cross (y) axis (thus the term flex). This is the default behaviour of flexbox.

Here's a picture of the main and cross axis of the container.

The main axis is the plane along which flexbox will always arrange it's elements i.e all elements sits on the main axis.

NB: It's important you remember this

Now the good thing about flexbox is that it came with handy properties which are listed below justify-contents, align-items, flex-grow, flex-basis, flex-shrink, flex-wrap, flex-direction and many others. I won't explain all these properties but I will explain all the necessary ones to make a fully responsive web page.

The hack here is to give each box a percentage width (not px) so they can maintain their space on the container accross all screen sizes.

1. `justify-contents`

This property directs the browser how arrange and space the the child elements along the main axis of the container. This has many values... listed below

flex-start- This is the default value as it stacks all the child elements at the beginning of the main axis.
flex-end- stacks all the elements at the end of the main axis.
center- stacks all child elements along the main axis at the center.
space-between- adds space in-between each child element, making it far away from each other.
space-around- adds space in-between and outside of each child element.
space-evenly- adds even space between two adjacent child elements.

Here's a demo by adding justify-contents and any of it's values to the container.

Code:

.container {
  display: flex;

  /*justify-content: flex-start | flex-end | center | space-between | space-evenly | space-around|;*/
  justify-content: space-evenly;
}

Result:

2. `align-items`

This property directs the browser how arrange and space the the child elements along the cross axis of the container. This has 4 values... listed below

stretch- is the default value. This stretches all the elements to take the full height of the container... it acts like a fluid.
flex-start- similar to justify-contents' flex-start except now it's arranges them with respect to the cross axis
flex-end- arranges elements at the end according to the cross axis.
center- arranges elements to the center with respect to the cross axis.

Code sample:

.container {
  display: flex;
  justify-content: space-evenly;
  /*align-items: flex-start | flex-end | center | stretch |;*/
  align-items: center;
}

Results:

4. `flex-wrap`

When we have flexed elements spanning across container the element but most times pass the maximum width of the container and as a result of this, they the shrink in-order to maintain staying in the container. To control this behaviour flex-wrap property is important. It has 3 values:

no-wrap- default value, tells the elements not to wrap around the container.
wrap- tells the elements to wrap around the container when they exceed the width if the container.

PS: This does not affect the alignment by the former properties... if the elements go to the next line is still a base the previous rules defined above.

Code:

.container {
  /*flex-wrap: wrap | no-wrap | wrap-reverse;*/
  flex-wrap: wrap;
}

Results:

5. `flex-direction`

This property changes the direction of the main and cross axis... Remember them?. As a result of this the elements' layout is rearranged... To me it's like the container was rotated (this is not whst happens tho)

The justify-content and align-items will still be the same... except they are facing a opposite direction now.

row- default value, directs the main axis horizontally and cross axis at a perpendicular line.
column- directs main axis vertically and cross axis at a perpendicular line.
row-reverse- same as row except it reverse the arrangement of the items on the same plane.
column-reverse- same as column except reverses arrangementof items on the column plane.

.container {
  /*flex-direction: column | row | column-reverse | row-reverse |;*/
  flex-direction: column;
}

Results:

Tips and cruise🏂

Alright guys, that's all I can write about on display flex... my hands are already weary from the long typing. Before I go, I'll like to drop a few tips to maximize flexbox.

Use percentage widths for the boxes so they can maintain the width accross all screens.
Use media queries to make your site responsive by changing few flexbox properties. E.g

@media only screen and (max-width: 760px) {
  .box {
    width: 100%;
    /* this will make each box take 100% of the container... this is only effective when container has a flex-wrap: wrap; property else they'll just shrink instead of going to the next line*/
  }
  /*Or...*/
  .container {
    flex-direction: column;
    /*arrange each element vertically*/
  }
}

Experiment with these values and they'll become part of you... make sure you flex with flexbox

You might have to create several inner divs grouping them to create more complex layouts. This sadly is one of the cons of flexbox.
A life hack to center one element vertically and horizontally is to use flexbox on a container div and assign align-items: center; and justify-content: center; on a single child element (___).
Practice, Practice and get better... experience is the best teacher and in no time you'll be creating complex responsive layouts without the use of css frameworks :-).

Special package 😗

Here's a link proper documentation of flexbox to know it's full features... Click Me🥺.
A YouTube video of DevEd explaining flexbox - Click me🥺.
Link to a flexbox cheatsheeet.
Freecodecamp's cheatsheet on flexbox

Anticipate 🥳... I'll be releasing cool and useful code snippets I use when developing beautiful designs... Watch out for the special series here on dev.to as we implement... oops🤐

Thanks a lot for your patient read 🥺🤍. It means a lot to me. Now don't forget to leave a like and comments

Top comments (10)

Habdul Hazeez • Feb 3 '21

In the first few paragraphs of your article you spelled a CSS property name as justify-contents and in your code snippet it's spelled as justify-content.

Kindly look into this because the property name is justify-content without the s as shown in your code snippets.