In this blog, I am going to give an overview of "flexbox" ,what it is ,why it is and more.. So, this will be more an introductory part about the topic.
Why Flexbox : an overview of flexbox
Before start using flexbox, I want you to show philosphy behind Flexbox and about its properties which helps us in making Flexbox layouts.
--What is flexbox?
Flexbox is a module in css that helps in alignment.We can align elements easily with the help of flexbox. It helps us in making responsive design.
The main idea in behind flexbox is that it gives the container the ability to expand and to shrink elements so that available space can be utilized .
Flexbox can replace floats which help in writing more readable code.
Points stated above are the some that will help in building one dimensional layouts in more perfect way. It is a true revolution in css and makes the life of most developers easy.
--Main Flexbox concepts
There are actually not so many concepts behind flexbox that you need to understand in order to use it but what you should know is this:-
The element on which we use flexbox is called as flex container and all we have to do in order to display flex container is to set its display property to flex. We can also display it to flex-inline but that will only let it works as an inline element.
Then all the direct children of flexbox container are known as flex-items and the direction in which flex-item are aligned is known as Main Axis.
The perpendiculur axis is known as Cross Axis.
It is important to keep this concepts in mind because we can change the direction of main axis and all.
--Properies of flexbox
There are some properties that we use on container and some directly on items. We will discuss about that here where I will give an brief overview of all of the properties:
Properties on Container:
- flex-direction: is the property which will specify in which direction the main axis goes. By default is row.
2. flex-wrap: is the property which simply defines that if a flex item should wrap in next line if there is not available space or not. By default is no-wrap.
3. justify-content: is the property which simply defines how the flex items should be align along the main axis. By default is flex-start.
4. align-items: is the property similar to the above only the difference is that it will be aligned along the cross axis. By default is stretch.
align-items and justify-content are the most important properties often used together.
5. align-content: is the property which applies only when there are more than one row of flex items and in that case it controls how the rows aligned By default is stretch.
Properties on Items:
- align-self: is the property which is very similar to the align-items only the difference is that it is applied only on individual item. By default is auto.
- order: 0 defines the order in which one specific item appear inside the container.
Now we have 3 properties which will together help flexbox decide on the width of flex item
3. flex-grow: 0 (defines how much an item can grow)
4. flex-shrink: 1 (defines how much an item can shrink)
5. flex-basis: auto ( defines base width)
There is a shorthand property for these 3 that is flex: 0 1 auto
We will understand these properties more clearly in the next blog so stay tuned for the next one.