Flex-Box use cases

Did you know that flexbox can help you create complex layouts with just a few lines of code? If you're tired of wrestling with floats and positioning, it's time to explore the power of flexbox. In this article, I'll show you some of the most creative and useful ways you can use flexbox to build dynamic and responsive websites.

One of the most problems developers face when Starting out Is centring a div. This has been made easy with flex-box, instead of using margins or positions which make your site unresponsive, all you have to do is to go to your CSS, give the tag you want to centre a display of flex, justify-content of centre, align-items centre and finally a height of 100vh.

Your code should look like this:

#container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

with this, your div should be nicely centred both vertically and horizontally.

Note that the align-items property, when trying to centre a div always works with height, without the height property the flex property would only centre your div horizontally that is using the justify-content property.

Another useful way of implementing flexbox in your code is using it for navigation using the justify-content property,

Let's say you want to create a nav bar, most developers would normally use float, then when adding the background colour, overflow of hidden would be applied to make the background show then paddings, margins and the rest. With flexbox all you need is to have a list like down below in your HTML:

    <nav>
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contacts</li>
        <li>Services</li>
      </ul>
    </nav>

once done, you should have something like this:

To remove the list decor and align them horizontally move to your CSS....

nav ul{
    list-style-type: none;
    display: flex;
    justify-content: space-between; /*Depending on your design. could be space around...etc*/
    gap: 10px;
    padding: 1em;
    background-color: #000;
    color: #fff;
}

This is a preview of what you should have:

Be creative with it, add your colours and not necessarily give the Justify-content space-between, you could give it space-evenly or space-around, depending on what your designing.

The last use-case of flex-box I propose and I reserved as the last because I thought of it as one of the best use cases, is aligning a text and an image on the same line, something like this:

To do something like this above, the image and the text has to be in one div:

<div class="rounded_img_and_text">
    <img src="pic_1.jpg" alt="" />
    <p>Kavhy-AI <br> followed you</p>
</div>

obviously, as you can see on your browser your image would be really big and your text would be right under the image:

Let's give it a quick fix using CSS:

.rounded_img_and_text {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
}

with the code above this is what you should get:

Give your site a nice font like Poppins, change the colour and keep trying different designs

There are many use cases for Flexbox, from simple layouts to complex user interfaces. As we have seen, Flexbox provides a powerful and flexible way to create responsive designs that can adapt to various screen sizes and device types.

In conclusion, Flexbox is a valuable tool for web developers who want to create modern, flexible, and responsive layouts. By using Flexbox, you can streamline your workflow, reduce code complexity, and provide a better user experience for your visitors. So why not give it a try and see how it can improve your next project?