logomedCode
November 24, 2023

Mastering Flexbox Basics: A Comprehensive guide

Have you ever encountered alignment challenges or want to get better at aligning content as a developer? Those days of using floats, positioning, and complicated calculations to align content were tru...
Mastering Flexbox Basics: A Comprehensive guide

#dev #css #flexbox #html

Have you ever encountered alignment challenges or want to get better at aligning content as a developer?

Those days of using floats, positioning, and complicated calculations to align content were truly frustrating.

But don't worry because Flexbox is here. This game-changing tool allows developers to effortlessly create complex and responsive web layouts.

In this article, we will explore the foundations of Flexbox, diving into its essential concepts and properties. Prepare yourself to revolutionize your web design skills with Flexbox!

What is Flexbox?

Flexbox also referred to as Flexible Box Layout, is an incredible CSS layout model that was introduced in CSS3. It empowers web designers to create flexible and responsive layouts for web pages. This layout model operates in a single direction, either vertically (from left to right) or horizontally (from top to bottom), making it a one-dimensional layout model.

One of the key benefits of Flexbox is its efficiency in arranging, aligning, and distributing elements within a container. By utilizing Flexbox, web interfaces can be built with ease, ensuring that they automatically adapt to different screen sizes and devices.

Concepts of Flexbox

When it comes to understanding and utilizing Flexbox, there are a few key concepts to keep in mind.

They are:

Flex Container

Flex items

Axes

1. Flex Container

The Flex Container, also known as the parent container, is where the Flex items are housed. In other words, the Flex items are contained inside the Flex container, which can be considered as the parent. The Flex container can have one or more Flex items as the children.

2. Flex Items

The Flex items, also known as the child or children, are the elements that are contained inside the Flex container. These Flex items can be arranged either horizontally (along the row axis) or vertically (along the column axis). By default, they are displayed in a single row.

Before transforming a container into a Flexbox, you need to set the display property to either flex or inline-flex, depending on your desired design. This allows the parent container to become a Flex container and enables the Flexbox functionality.

** Example: Code illustrating the syntax for flexibility of flexbox**

.flex-container
{
display: flex;
/_or you can set the value to inline_/
display: inline;
}

It's important to note that Flexbox operates on items that are directly inside a container. Therefore, it's crucial to properly structure your HTML markup to ensure the correct implementation of Flexbox.

** Below are code illustrations describing Flex containers and Flex items.**

Code HTML

<html>
    <div class="flex-container">
        <div class="flex-item box-1">Box 1</div>
        <div class="flex-item box-2">Box 2</div>
        <div class="flex-item box-3">Box 3</div>
    </div>
</html>

code CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
}

.flex-container {
    border: 8px solid purple;
    display: flex;
    background-color: black;
    height: 300px;
}

.flex-item {
    height: 100px;
    width: 100px;
    color: #2b0606;
    font-size: 2rem;
    margin: 4rem;
    padding: 2rem;
    text-align: center;
    font-weight: bold;
}

.box-1 {
    background-color: greenyellow;
}
.box-2 {
    background-color: blueviolet;
}
.box-3 {
    background-color: grey;
}

The Output

Mastering Flexbox Basics Comprehensive guide

NB: You can style the CSS depending on how you want your output to look.

The border, background color, and other properties on the code source above are included for better illustration.

3. The axes

The axes consist of the main axis and the cross axis.

  • Main axis The main axis is a horizontal line that extends from left to right. The starting point on this axis is referred to as the main start, while the ending point is known as the main end. The measurement of this axis is referred to as the main size.

The direction in which the main axis runs is determined by the property flex-direction, which can be set to either a row or column.

  • Cross axis The cross-axis is perpendicular to the main axis. The starting point on this axis is called the cross start, and the ending point is known as the cross end. The length of this axis is referred to as the cross size.

Image illustrating the main axis and the cross axisMastering Flexbox Basics: A Comprehensive guide

Flexbox Properties

Flexbox properties are essential for governing the behavior of flex items within a flex container.

These properties can be divided into two groups:

container properties

flex item properties

1. Container Properties

Container properties include flex-direction, flex-wrap, flex-flow, justify-content, flex-grow, flex-shrink, and align-items.

These properties control how flex items are arranged and aligned within the flex container.

2. Flex Item Properties

Flex item properties include order, flex, flex-grow, flex-shrink, and align-self.

These properties dictate the individual behavior of each flex item within the container, such as their order, flexibility, and alignment.

Let's explain container properties

1. Flex-Direction

Flex direction property determines the main axis and its direction, which in turn determines whether the flex items are positioned in a row or column inside the container.

The possible values for this property are:

  • flex direction-row : By default, the main axis of Flexbox runs from left to right.


.flex-container {
    flex-direction: row;
}


Output

the main axis of Flexbox runs from left to right

  • Flex direction column : By setting the flex-direction property to the column, you can change the direction of the main axis to vertical.


.flex-container {
    flex-direction: column;
}

Output

setting the flex-direction property to the column

  • flex-direction row-reverse: This property value reverses the order of the flex items in a row.
.flex-container{
flex-direction: row-reverse;
}
  • Output

get better at aligning content as a developer

  • reverse column This property value reverses the order of the flex items in a column.


.flex-container {
    flex-direction: column-reverse;
}

output

Flexbox also referred to as Flexible Box Layout

Flex wrap

Flex containers can have multiple lines of items if space is limited.

The flex-wrap property controls whether the items should wrap onto new lines or stay on a single line. Its values include nowrap, wrap, or wrap-reverse.

  • flex-wrap: nowrap This is the default value and ensures that the flex items stay on a single line, even if it causes overflow.
.flex-container {
    flex-wrap: nowrap;
}

outputThe Flex Container, also known as the parent container

  • flex-wrap: wrap By setting the flex-wrap property to wrap, the flex items are allowed to wrap onto new lines when necessary.
.flex-container {
    flex-wrap: wrap;
}

output

The Flex items, also known as the child or children

  • flex-wrap: wrap-reverse This property value wraps the flex items onto new lines but in reverse order.
.flex-container {
    flex-wrap: wrap-reverse;
}

OutputFlex direction property determines the main axis and its direction

Flex Flow

Flex-flow is a combination of the flex-direction and flex-wrap properties, allowing you to specify both the main axis and the wrapping behavior in a single property.

  • flex-flow: column nowrap

Output

Flex-flow is a combination of the flex-direction and flex-wrap properties

author image
AuthorMOHAMMED DAKIR

This website uses cookies to enhance your browsing experience, analyze site traffic, and serve better user experiences. By continuing to use this site, you consent to our use of cookies. Learn more in our cookie policy

Explore the latest insights, articles,free components, and expert advice on programming and software development

© Copyright 2024 MED DAKIR. All rights reserved./privacy policy