Here display is the property and block is the value.
When we have to to arrange the boxes in block mode, we will use display: block;
When we have to arrange the boxes in horizontal manner then we will use the display: flex; Here the boxes will take the maximum height among the three boxes.
There are two axes that comes into picture, when we justifying horizontally and aligning vertically. There are "Main Axis"(horizontally) & "Cross Axis"(Vertically). Still the view will be considered as 1D only.
Justify-content: When aligning the items horizontally we will use justify property with repect to display:flex;
Using this property, will align all the boxes horizontally at the start of the page.
Using this property, will align all the boxes horizontally at the end of the page.
Using this property, will align all the boxes horizontally at the center of the page.
Using this property, will align all the boxes will leave the half the space to the sides as in between the space between the elements i.e., containers.
Using this property, will align all the boxes will leave the spaces towards the sides,it's just padding of the container.
Using this property, will align all the boxes with equal amount of spaces in between them.
Note: By-default align-items property will take the values of stretch i.e, align-items: stretch;
Property used to stretch the items along y-axis.We can observe no change in the output here.
Property used to stretch the items from the starting point of the y-axis.
Property used to stretch the items from the ending point of the y-axis.
We can also change the order of the elements using order:1 but the drawback we can't change the dom of the particular element accordingly. If we want to travel from one element to another using tab it will consider the order of DOM rather than arrangements of elements in CSS & We have to keep in mind about the screen readers too as accessibility is missing here.
align-content property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.
align-content: start; /* Pack items from the start */
align-content: center; /* Pack items around the center / align-content: end; / Pack items from the end / align-content: flex-start; / Pack flex items from the start / align-content: flex-end; / Pack flex items from the end */
The align-self CSS property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.
As the web page shrinks, the elements start missing their original width. So inorder to make it sustain , we can use flex-wrap property.
The flex items break into multiple lines.
The cross-start is either equivalent to start or before depending flex-direction value and the cross-end is the opposite of the specified cross-start.
The flex items are laid out in a single line which may cause the flex container to overflow.
The cross-start is either equivalent to start or before depending on the flex-direction value. This is the default value.
Behaves the same as wrap but cross-start and cross-end are permuted.
To make certain element not to shrink even the container is shrinking with respect to responsiveness of the page.
The flex-shrink CSS property sets the flex shrink factor of a flex item.
If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.
The flex-grow CSS property sets the flex grow factor, which specifies how much of the flex container's remaining space should be assigned to the flex item's main size.
The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.
Ex: Here we set flex-basis: 2 to second element in the container.
/* flex: */