CSS Flexbox

Imagine developing amazing web layouts that smoothly adjust to any screen size or device, laptop or mobile, without the necessity of sophisticated code. Welcome to the world of CSS Flexbox, a layout module that aids in the transformation of modern application design. In this article, I’ll go over flexbox and how it can be utilized to create flexible designs.

Overview of CSS Flexbox

Flexbox, also known as Flexible Box Layout, is a CSS layout module that has transformed the approach to responsive design and content arrangement. Flexbox provides a more efficient and effective method for aligning, distributing, and ordering items within a container. This eliminates the need for us developers to utilize floats, tables, or other less-than-ideal solutions that used to give us grief.

Flexbox is the ability to build a flexible container that can change the size and position of child components, often known as flex items. With characteristics and values that allow us to manage the orientation, alignment, order, and size of these elements within the container, both horizontally and vertically.

CSS Flexbox key concepts

There are a few ideas you need to grasp before you can begin to work with a flex box effectively, and these ideas are:
1. Flex container
2. Flex items
3. Main Axis and Cross Axis
4. Flex Properties

Flex Container

This is the container for and controller of the layout of its child components, which are called flex items. If you provide an element the display: flex; property, it will act as a flex container and transform its direct descendants into flex items. This is a crucial idea that will be used often when working with Flexbox.

Flex Items

The arrangement of the flex items that make up a flex container offspring is determined by the container’s properties. Depending on the confines of the container, these malleable components may be scaled, rearranged, and aligned in a variety of ways.

Let me provide a simple example to show how a flex container is related to the flex items it contains.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* Set the display property of the container to "flex" */
        .flex-container {
            display: flex;
        }

        /* Apply basic styles to flex items */
        .flex-item {
            background-color: lightblue;
            padding: 15px;
            margin: 10px;
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">Item 1</div>
        <div class="flex-item">Item 2</div>
        <div class="flex-item">Item 3</div>
    </div>
</body>
</html>

The code and picture above and below respectively depict the contents of a flex container, which are flex items.

Main Axis and Cross Axis

There are two axes that Flexbox uses to function: the main axis and the cross axis. Flex items are often arranged along one of two axes: the main axis, which may be thought of as the “row” or “column” orientation, and the cross axis, which is perpendicular to the main axis. The flex container’s ‘flex-direction’ attribute controls the alignment of these axes.

Let’s modify our earlier code by adding some properties to demonstrate.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .flex-container {
            display: flex;
            /* Define the flex-direction (main axis) */
            flex-direction: row; /* Change to 'column' to see the difference */
            /* Align items along the main axis */
            justify-content: space-between;
            /* Align items along the cross axis */
            align-items: center;
            
            font-size: 3rem;
            border: 1px solid black;
        }

        .flex-item {
            background-color: lightblue;
            padding: 15px;
            margin: 10px;
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">Item 1</div>
        <div class="flex-item">Item 2</div>
        <div class="flex-item">Item 3</div>
    </div>
</body>
</html>

Depending on the `flex-direction` value we should get one of these result.

Flex Properties

The flex container and flex items both have access to Flexbox’s extensive property set. Several of them, including display, justify-content, and align-items, have previously been used. Developers may easily implement a wide variety of layout situations thanks to these parameters, which elegantly control the size, order, and alignment of flex objects inside the container.

Properties for containers and properties for items make up the bulk of the flex properties.

I’ll list a few of the flex container’s property:

display: Turn an element into a flex container by setting its display property to flex or inline-flex. This transforms the element’s immediate children into flex items and provides developers with more freedom when laying up their pages.
flex-direction: This controls the alignment of flex items and the direction of the main axis. Depending on your design requirements, you may choose among row (the default), row-reverse, column, and column-reverse.
flex-wrap: When there isn’t enough room on the primary axis, flex objects may wrap into additional lines, which you can adjust using flex-wrap. You can choose the best match for your layout from the three available options: nowrap (the default), wrap, and wrap-reverse.
justify-content: This property allows you to specify the main axis alignment for flex elements. Flex-start (the default), Flex-end, Center, Space-between, Space-around, and Space-evenly are just few of the parameters available to help you get the exact look you want for your design.
align-items: Use this property to set the alignment of flex items along the cross axis. You may construct attractive and well-organized layouts by choosing from the following options: stretch (the default), flex-start, flex-end, center, and baseline.
align-content: This properties centers the flex lines in multi-line containers that have additional space in the cross axis. To obtain the desired impact in your design, choose either stretch (the default), flex-start, flex-end, center, space-between, space-around, or space-evenly.

Here are a few properties we have for the flex items.

flex-grow: This is a property that tells the container how much more space a flex item may take up in comparison to its other siblings. Unless otherwise provided, the default value of 0 signifies that no objects will expand in size.
flex-shrink: When available space in a container is restricted, the flex-shrink attribute specifies how much a flex item should contract in comparison to other things. By default, Flex objects will decrease in size proportionally to fill the available space.
flex-basis: This property determines the primary size of a flex item before it is scaled up or down using the flex-grow and flex-shrink attributes, respectively. The default option is auto, which instructs the browser to use the item’s content to decide its size.
flex: Flex combines flex-grow, flex-shrink, and flex-basic into a single shorthand property. There will be no expansion, no contraction, and the basis will be set automatically if you leave this property’s default value of 0 1 auto in place.
order: To specify the order in which flex elements are presented within a flex container, use the order property. You may easily reorganize Flex components by sorting them by order value, with lesser order values showing up first.

Common use case of Flexbox

Flexbox is a strong and flexible layout element that has drastically altered the face of current web design. Flexbox is an essential tool for web designers, and here are some of the most typical uses for it:

Flexbox makes it easier to make navigation bars that scale gracefully to different screen widths. I can simply adjust the distance between and alignment of navigation elements inside the container using characteristics like justify-content and align-items, resulting in a streamlined user experience.
Flexbox excels at aligning form labels and input elements, particularly for horizontal alignment, making it ideal for use with form controls. By applying display: flex; to a form group container, I can ensure that labels and input fields stay in the same relative position, regardless of the size of their contents. A aesthetically pleasing and practical layout is the end product.
Flexbox is a game-changer when dealing with media items like picture and text combinations. By making use of flex features, the picture and text will always be properly aligned, no matter the size or aspect ratio of the image.
Flexbox makes it easy to arrange and distribute content vertically and horizontally inside a container. This is very helpful for providing the design a professional appearance by centering information inside parent containers, such as modals or call-to-action sections.
Card-based layouts are common in contemporary web design, and Flexbox is the best option for them. Flex-wrap allows me to make a responsive grid of cards that automatically adjusts to different screen sizes, which improves the grid’s usability for people with disabilities.
Floats and other less versatile methods are now unnecessary thanks to Flexbox’s convenient way to creating multi-column layouts. With flex-grow and flex-basis, I can make columns whose widths adapt to the amount of space between them and the size of their contents.
The order attribute in Flexbox lets me rearrange the DOM components within a flex container without touching the markup. This function is very important in responsive designs, as the display order of information may need to adapt to the viewing device.

Building a navbar using Flexbox

One common use of flexbox in modern online applications is the ubiquitous navigation bar. This crucial feature typically has two parts: the title and the navigation links that allow visitors to hop from one page to another. The title usually appears on the left of the navigation bar, while the links themselves extend to the right. This can easily be done with use of our flex properties.

let’s do this.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>

        /* Define the nav-bar styles */
        .nav-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #1c3565;
            padding: 0.5rem;
        }

        .nav-logo {
            color: white;
            text-decoration: none;
            font-size: 1.5rem;
        }

        .nav-links {
            display: flex;
            list-style-type: none;
        }

        .nav-links li {
            margin-left: 1rem;
        }

        .nav-links a {
            color: white;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <nav class="nav-bar">
        <a href="#" class="nav-logo">Soshace</a>
        <ul class="nav-links">
            <li><a href="#">Articles</a></li>
            <li><a href="#">Remote Jobs</a></li>
            <li><a href="#">Developers</a></li>
            <li><a href="#">Companies</a></li>
        </ul>
    </nav>
</body>
</html>

And here is what my simple navbar looks like.

Conclusion

To sum up, Flexbox is an extremely effective and flexible CSS layout element that has revolutionized the way we developers develop mobile-friendly and user-friendly websites. Without resorting to hacks or workarounds, modern, adaptable, and dynamic layouts can be made with ease because to its ability to align, distribute, and organize items with ease.

It’s crucial for me to learn Flexbox’s capabilities and attributes as its use grows among web designers and developers. By fully embracing Flexbox, I can make websites that are easier to update, more efficient, and more user-friendly across a wide range of screen sizes and devices. As a designer, this not only makes me happy, but it also opens the door to better online usability and accessibility in general.

Here is a link to the learn more about the Flexbox layout module.

Subscribe to Updates

What's Hot

Important Pages:

CSS Flexbox

CSS Flexbox

Overview of CSS Flexbox

CSS Flexbox key concepts

Flex Container

Flex Items

Main Axis and Cross Axis

Flex Properties

Common use case of Flexbox

Building a navbar using Flexbox

Conclusion

Related Posts