What is CSS Flex Box?
The flexbox in CSS is a one-dimensional layout model, which provides an easy & clean way to arrange items within a container.
As the name suggests, flexbox is all about flexibility. We can control whether items grow or shrink, how the extra space is distributed and more.
Flexbox is useful for creating small-scale layouts & is responsive and mobile-friendly.
Flexbox Axes:-
Flexbox operates in a 2 axes system: a main and a cross-axis. The main axis is your defining direction of how your flex items are placed in the flex container. Determining the cross-axis is very simple, it's in the direction that's perpendicular to your main axis.
Flexbox properties:-
- flex-direction:-
.box{
display: flex;
flex-direction: column | row | row-reverse | column-reverse;
}
- justify-content:-
It controls the alignment of all items on the main axis.
.box{
display: flex;
justify-content: center | end | flex-start | flex-end | left | right | space-around | space-between | space-evenly;
}
- align-items:-
It controls the alignment of all items on the cross-axis.
.box{
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}