⇢ Flexbox is a one-dimensional layout model. Before flexbox, there were four layout modes. The Flexbox provides a lot of flexibility.
It has two entities:
✧ flex-container
✧ flex-items
⇢It is important to note that in order to use Flexbox properties, the display property must be set to "flex" or "inline-flex" on the parent container of the flex items. Without this, the Flexbox properties will not have any effect.
✧ flex-direction: row & row-reverse.
✧ flex-direction: column & column-reverse.
There is another shorthand property, flex-flow, which allows setting both the flex-direction and flex-wrap properties in one line.
The flex property is a shorthand for the flex-grow, flex-shrink, and flex-basis properties.
The element with the class "item2" will have a starting width of 100 pixels, and it will not grow or shrink in size relative to the other flex items in its container.
The align-self property is similar to the align-items property that is used for Flex Containers, but it is
applied to individual Flex Elements. It overrides the default alignment set by the align-items property.
It can take the following values:
