What is CSS Flexbox?
CSS Flexbox - CSS Flexbox is a new Layout module in CSS 3. It is called flexible box because it can create a flexible and responsive container with some small containers inside it. CSS Flexbox makes it very easy to create a responsive layout without much brainstorming. Earlier, Web Designers had to use floats to align divs which is not the case with CSS Flexbox.
To start with flexbox you just have to add a single property display:flex; in your parent element and all of its child elements will start behaving like flex-items.
Advantages of flexbox:
There are many advantages of flexbox and it depends on designer to designer how they use it. Below are given some of the basic features of flexbox, have a look:
- Helps in creating a responsive and flexible design with media Queries.
- Can align block items horizontally without using floats.
- Flexbox can easily distribute space around flex-items to enhance the look of the website.
- It can order the flex-items in whatever way it is needed.
- Specify the grow and shrink rate of a flex-item during changes in the viewport.
Terminologies related to Flex-box
- Main Axis: It is the horizontal Axis from left to right. The left end is the start and the right end is the end.
- Cross Axis: It is the Vertical Axis from Top to Bottom. The top end is the start and the bottom end is the end.
- Flex Container: It is the container which will host all the small containers (Child Containers). On this container, most of the flex properties are applied.
- Flex-Items: These are Child containers, which will reside inside of the Flex-container.
How to use Flexbox?
We will explain flexbox in a very simple language. The first thing you should know that for using CSS Flex, you have to create a Flex Container (Parent Container) which will host some Flex Containers (Child Containers). CSS Flexbox has different properties for both Parent and Child Containers.
Click on next, to learn about flex containers and their properties.