Basic Concept Of CSS FlexBox Layout Module

To understanding the flex, I'll use the navigation bar as an example because this is a very typical use case for Flexbox. This will show you the most used properties of the module, not those less important ones.

Our First Flexbox layout:

The two main components of Flexbox design are containers and elements. Here is our example HTML, which contains a container containing three elements. 

Before converting it to a Flexbox design, the </div> elements will be stacked on top of each other. In order to convert it to a Flexbox design, we will simply provide the container with the following CSS property. 

.container {
    display: flex;
}

This will automatically position the element along the horizontal axis. If you want to see the actual code, you can go to this courtyard in Scrimba. Let us now mix these elements a little.

Align items and Justify content:

Alignment and alignment elements are two CSS properties that help us distribute articles in containers. They control how the component is placed along the major axis and the horizontal axis. In our case (but not always), the major axis is horizontal and the horizontal axis is vertical. In this article, we will only see justify-content because I have found that this is not just an alignment element. However, in my Flexbox course, I will explain two attributes in detail. We use justify-content to centre all the elements along the main axis. Or we can set it up to space-between, which will add space between elements, just like this.

.container {
    display: flex;
    justify-content: space-between;
}

These are the values ??you can set for justify-content.

flex-start (default)
flex-end
center
space-between
space-around
space-evenly

I suggest you play with them and see how they develop on the page. This should give you enough knowledge of this concept.

Take Control of a single item:

We can also control individual projects. Let's say, for example, that we want to leave the first two elements on the left but move the Close Session button to the right. To do this, we will use an excellent technique setting the margin to Auto.

.logout {
    margin-left: auto;
}

If we want both the search element and the logout element to be on the right, we simply add the left margin to the search element. 

.search {
    margin-left: auto;
}

It will push the search element to the right as much as possible, which will push the log out element again.

The flex property:
So far we have only fixed-width items. But what if we want them to respond? To achieve this, we have a property named flex. It is much easier than the previous way of using percentages. We will briefly explain all items and give them flex value ??1.

.container > div {
    flex: 1;
}

As you can see, stretch the item to fill the entire container. In many cases, you may want one of the items to occupy extra width, so you can only configure one item to make it flexible. For example, we can let the search element occupy all the extra space.

.search {
    flex: 1;
}

Before finishing this article, I would like to mention that the flex attribute is actually an abbreviation of three attributes. Flex-grow, flex-encoder, and flex-basis.