CSS Flexbox Simplified

CSS Flexbox Simplified

Flex your CSS skills. ๐Ÿ‘€

ยท

7 min read

Flexbox is one of the most powerful layouts, to design high, quality responsive designs. ๐Ÿ’ช And it is pretty easy to catch up. However, sometimes tricky. ๐ŸŒŸ

Scope of this blog:

  • Quick walkthrough of the most important Flexbox properties.
  • We will learn about the properties, and also use them to design something like ๐Ÿ‘‡
  • How to center anything with just a few lines of code using flexbox ๐Ÿ˜(this is why you are here, trust me)
  • Also an embedded codepen/IDE, with the source code of today's styling task, for you all to play around with and gain a better understanding of flexbox properties.

Screenshot (148).png

  • The classic Navigation Bar requires flexbox styles. And of course, centering anything. ๐Ÿ˜Ž

What is Flexbox and why is it important? ๐Ÿค”

Flexbox is short for CSS Flexible Style layout.

Flexbox layout helps us create highly responsive stylings without using any other properties like positions or float. With Flexbox, we have complete control over the layouts of the elements.

For elements to be styled using flexbox layout, they must be :

  • Wrapped inside a container. Applying flexbox properties to the container will automatically arrange the elements that are contained
  • The idea is to: wrap all the elements inside of a container class so that the flexbox application becomes easier.
  • Think of it as a pencil box(container) with all the pencils inside(elements inside the container). We can easily style the elements(pens) by applying flexbox properties to the container(Pencil Box). ๐Ÿ˜Ž

Most Used Flexbox properties.

1. Display

  • To apply flexbox styling, we need to set the display property to flex.
  • By default, applying flex on a container, would style all the elements along the row.

2. Flex-Direction.

  • As the name suggests, this property specifies how the elements will be styled. It has four possible options :

  • row : Aligns the elements in a row.

  • column : Aligns the elements in a column.
  • row-reverse: Aligns the elements in a row, in reverse order.
  • column-reverse : Aligns the elements in a column, in reverse order.

Before we move on to the next few important properties, it is necessary to understand the concept of Main-Axis and Cross-Axis.

If the elements are arranged in a row.

  • The Main Axis would be along the Row. i.e, X-Axis
  • The Cross-Axis would be the Axis perpendicular to the Main-Axis. i.e, The Y Axis.

Similarly,

If the elements are arranged in a column.

  • The Main Axis would be along the Column. i.e, Y-Axis
  • The Cross-Axis would be the Axis perpendicular to the Main-Axis. i.e, The X-Axis.

This is the simplest definition I could develop to simplify the main and cross axis idea because their understanding is needed for the other flexbox properties. If this seems complicated, I am attaching one of my hand notes, that might help you understand the Axes properly.

IMG_20210626_200321.jpg

Moving on to the next properties - used for styling the elements.

3. justify-content

This property aligns the elements along the main axis.

Its's possible values are :

  • flex-start: aligns the elements at the start of the flex container.
  • flex-end: pretty much like flex-start, except aligns the elements at the end of the container.
  • space-around: aligns the elements in such a way that the elements have space around them
  • space-between: aligns the elements in extremes of the main axis, so as to keep space in between the elements.
  • space-evenly: aligns the elements evenly along the main axis.

661999ba-c216-4c71-b959-82f878309730.o.png

Image Source

You can click on the image source to learn more about flex.

If none of these makes sense, right now. Do not worry, stick around just a little bit. Things will get clearer once we implement it. Also, I will be attaching a flexbox cheat sheet. ๐Ÿคฉ

4. align-items

This property aligns the elements along the cross axis. It takes similar values like justify-content. The only difference is unlike justify-content, align-items align the elements/items along the cross axis.

Flexbox Cheat Sheet

Dk10R1iUwAAAYEu.jpg

Image Source

Enough of theories so far, let us jump into the codes. And develop something that requires flexbox understanding.

End Product

Screenshot (148).png

Let us Begin ๐ŸŽ‰๐ŸŽŠ๐Ÿ’ป

Step 1 The HTML backbone

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/style.css">
    <title>Flexbox</title>
</head>
<body>

    <nav>
        <h2>I am a Developer</h2>

        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </nav>


    <header>
        <h1>Welcome! Am I Centered? ๐Ÿค”</h1>
    </header>

</body>
</html>

This is just the HTML backbone, and it looks like text on the browser For your reference with just the HTML, the outcome looks like,

Screenshot (149).png

Step2 : Styling with css

Let us look at, and understand the CSS lines of code.

*{
    padding :0;
    margin :0;
}

body{
    background: linear-gradient(to bottom right, rgb(12, 167, 162),crimson );
}
  • This is very obvious. The * helps us to override the user-agent styles(preset styles)
  • We also added some color to the body. The background of the document.

Flex usage

nav{
    color: white;
    background-color: black;
    height: 9vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
nav ul{
    width: 50%;
    display: flex;
    justify-content: space-around;
}
nav ul li{
    list-style: none;

}

Let us understand what is happening.

  • The Nav tag is acting as a container, as it contains elements inside it.
  • It is easy to start styling by applying flex on the Nav tag. And the elements are inside it will be arranged as per specified.
  • Applying flex to Nav and using justify-content: space-around, aligns the 'I am a developer' and the entire ul tag along the main axis and also makes space around the elements.
  • The align-items: center; aligns the elements inside the Nav tag, along the cross axis, just at the center.
    display: flex;
    justify-content: space-around;
    align-items: center;

How does it look now?

Screenshot (150).png

  • Notice how they are spaced around, in the Nav.

To further style it, to look cool

  • Perform the same flex, on the ul and its elements.
  • Why? Because, the ul tag has elements inside it, and it acts as a container.
nav ul{
    width: 50%;
    display: flex;
    justify-content: space-around;
}
nav ul li{
    list-style: none;

}

- It is also important to notice, that we have set the width of nav ul to 50%. That means the entire Nav(total 100%) is divided into two equal portions. You can set the width to whatever you like. I will be embedding an IDE so that you can play around with these properties.

After these changes are made the output looks like this: ๐Ÿ”ป

Screenshot (151).png

How cool does that look? ๐Ÿคฉ

Now the last part to center the h1 tag.

  • This is important to understand because knowing how to center an element gives you a lot of edges. ๐Ÿ˜Ž
  • It can be achieved with just two lines of code.
 header {
    height: 91vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
  • The header tag is acting as a container, and applying flex on it styles the elements inside it.
  • justify-content: center; aligns the elements at the center of the main axis.
  • align-items: center; aligns the h1 tag at the center of the cross axis.

Point to note:

  • It is necessary to notice that we have applied height to the header tag. If the height is very small, or default set to the auto height of the header tag, you will not see any difference upon adding align-items: center;

Why? Because in order to style the elements along the cross axis, there has to be enough space for that.

Below, I am embedding a link to a codepen , so you can play around with the flexbox properties and learn it well. ๐Ÿค—


Wrapping Up

  • Flexbox is one of the most powerful layout-to-style elements on the web. โœจ
  • To apply flex stylings we need to specify => display: flex; on the container. ๐ŸŽ
  • What is a container? The analogy of pens and pencil box, above. โ˜‘
  • Main Axis and Cross Axis concepts are important to use the flex properties which aligns the elements.
  • justify-content: aligns the elements along the main axis. ๐Ÿญ
  • align-items: aligns the elements along the cross axis. ๐Ÿฌ
  • Play around with the embedded IDE(codepen) to gain a clear and better understanding of the flexbox properties.

That is all for this blog. We covered the basics of flexbox. But these basics cover a lot portion of the entire flexbox layout. ๐Ÿ‘จโ€๐Ÿซ**

You can read more about flexbox here ๐Ÿค—


Have a wonderful weekend ahead. ๐ŸŽ‰