Inside a webpage, there are many components like text, images, buttons and many more. As per the requirements of the webpage, the components are placed at different positions and in different orientations. This can be clear if we think of a real-world example.
We all have encountered many websites daily, like for ticket booking we use irctc.co.in, online shopping we use amazon, flipkart etc. But we all notice that the interface of these websites is not the same, they are different as per the use.
As a developer, we know the default display properties of the different HTML tags, like the <span>, <img> are block level elements, <p>, <h1>, <h2>, <h3> and the heading elements are inline elements.
In the example below we can see the space occupied by different HTML elements.
We can easily differentiate the space taken by inline elements and block elements. A block-level element always takes the whole width, even if the content is smaller than the width, while in the case of inline elements, it occupies only the space required by the content.
<span> and <img> elements are taking only the width required to fit the content, while the <p> and heading elements are taking the whole line even if the content is smaller than the width.
These are the basic display properties of HTML elements, which can be changed using CSS according to use. Display properties are very useful when we are aligning the different components on a webpage.
Flexbox is used for aligning the various components of the webpage in different positions. The word flex here refers to flexibility.
To use Flexbox, we define the display of the parent element to flex, it permits us to align the children's elements in different alignments.
Main axis & Cross axis
The flex helps us in traversing the child element inside the parent box in the main and cross axes. The main axis is the direction in which the flex is aligned, in the case of flex-direction defined as the column, the main-axis direction is also along the column, and the cross-axis is always perpendicular to the main axis.
The default flex-direction is row, and we can change it to row-reverse, column and column-reverse. When the flex-direction is row, the main axis is along the row, and the cross axis is along the column.
Some examples of various flex directions:
In the example above we haven't changed the default display properties of HTML elements. We can see by default the children's elements are aligned vertically.
display: flex;
When we set the display to flex, all the elements are automatically aligned in the horizontal direction or we can say row-wise. This shows that by default the flex-direction is row.
Now we can experiment with the different directions of the flex.
flex-direction: column;
The boxes are aligned vertically in a column-wise direction.
flex-direction: row-reverse;
The boxes are aligned row-wise but now the order of the boxes gets reversed.
flex-direction: column-reverse;
The boxes are aligned column-wise but the order of boxes is reversed now.
All the above flex properties are used for aligning the boxes in either vertical or horizontal directions. But, many more properties can be used along with Flexbox for various use cases.
justify-content
The justify-content property is used for aligning the children's elements along the main axis. The justify-content can accept the values, flex-start, flex-end, center, space-between, space-around and space-evenly.
In the example above the justify-content is set to flex-start and the flex-direction is set to column-reverse that's why the boxes are stuck to the bottom-left of the container, which becomes starting of the flexbox when we change the flex-direction to column-reverse.
justify-content:flex-end;
This property aligns the children's elements at the end of the flexbox along the main axis.
justify-content: center;
Using justify-content: center; the boxes are aligned in the centre.
To define the spacing between different children's elements by using the available space in the parent we use space-between, space-around and space-evenly properties.
justify-content: space-between;
The boxes will be aligned in a manner in which the available free spaces are divided between the first and last boxes. We can see the first and last boxes are at the start and the end positions of the container while the rest boxes are maintaining a uniform available space.
justify-content: space-around;
The space-around is providing spacing in the first and last boxes also, in this case, the space between the middleboxes is more than the space between the parent and the first box and the parent and last box.
This happens because, when we define the space-around property it gives a top space and a bottom space to the box which combines in the middleboxes.
justify-content: space-evenly;
The space-evenly is used when we need a uniform space between all the boxes, it includes the first and last box also.
align-items
Similar to the justify-content property, there are other property align-items, this property is used to align the content along the cross-axis.
The various acceptable values for the align-items property are flex-start, flex-end, center, stretch and baseline.
align-items: flex-start;
The flex-start aligns the items at the start of the flexbox and along the cross-axis.
align-items: flex-end;
The flex-end aligns the items at the end of the flexbox along the cross-axis.
align-items: centre;
The elements get aligned in the centre along the cross-axis. Note that the main axis and the cross axis depend upon the flex-direction defined. In the example below the flex direction is column-reverse, which indicates the cross-axis will be horizontal.
align-items: stretch;
This property is used to stretch the elements to occupy the space so that the smallest element matches the height of the largest element.
align-content
The align-content property is similar to align-items but it works only when the flex-wrap is applied. In the example below, the align-content is set to centre and the with and without flex-wrap: wrap is shown.
When flex-wrap: wrap; is applied.
When flex-wrap is not applied.
In both cases, the align-content property remains center, but when the flex-wrap property is absent the boxes overflow and the content is not aligned in the centre.
flex-grow and flex-shrink
The flex-grow property indicates the growth rate of an element in comparison to other elements. It is a numerical value, the default value of flex-grow is 0.
If we set the flex-grow value of an element equal to 2, that means the element will grow at double the rate of other elements, when the parent is resized.
The flex-shrink works the same as flex-grow, but in the case of flex-shrink, the shrinking is affected, and the default value of flex-shrink is 1.
align-self
This property is used for aligning an individual of the children's elements.
Without align-self
With align-self: center;
The selected boxes get the center property while the rest remain intact.
gap
The gap property can be used to define the gaps between flex items. We can define the gaps between the rows and the columns, gap: 10px; which gives a 10px gap to both the columns and the rows, gap: 10px, 30px; means a gap of 10px between the rows and a gap of 30px between the columns.
Flexbox is used very frequently for designing webpages and there are various properties of Flexbox. The MDN docs can be referred to for more information when needed.