CSS Flexbox.
In CSS there was a time when there were four layout modes. Block, for sections within a webpage, inline, for text, table, for 2D table data, and positioned, for explicit position of an element. Now there is Flexbox layout which makes designing flexible layout structures easier. We no longer need to use float or positioning.
Flexbox Container.
First you must define a flex container and include three fixed items. In order for the flex container to be flexible, the display property has to be set to flex. For example, it will read: .flex-container { display: flex; }. The flex direction property defines the direction the container will stack the flex items. Flex-wrap property allows the flex items to be made into columns. Flex-flow property is a shorthand tool to set flex-direction and flex-wrap. Justify-content property aligns the flex properties on the left, middle, or right side. Align-items property aligns them in center, flex-start, or flex-end. Align-content property allows you to have equal space between the flex-wrap items.
CSS Flex Items.
Flex items are like the child in a parent-child relationship between containers and flex items. The order property explains the order of the items. Flex-grow property allows each flex item to grown as you move down the line of flex items. Flex-shrink will do the opposite of flex-grow, the items will shrink. Flex-basis property states the initial length of the flex item. Align-self property specifies alignment for the selected item within the container and it also overrides the align-items property.