Basic Concept Of CSS FlexBox Layout Module
Posted By : Vijendra Kumar | 31-Mar-2018
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
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
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
.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.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Vijendra Kumar
Vijendra is a creative UI developer with experience and capabilities to build compelling UI designs for Web and Mobile Applications. Vijendra likes playing video games and soccer.