CSS Flexbox Layout Module

Before the Flexbox Layout module, there were four layout modes:Block, for sections in a webpage Inline, for text, table, for two-dimensional table data, positioned, for explicit position of an element. The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning. To start using the Flexbox model, you need to first define a flex container.

CSS Flexbox Container

The flex container becomes flexible by setting the display property to flex. The flex-direction property defines in which direction the container wants to stack the flex items. The flex-wrap property specifies whether the flex items should wrap or not.

CSS Flexbox Items

The direct child elements of a flex container automatically becomes flexible (flex) items. The order property specifies the order of the flex items.The first flex item in the code does not have to appear as the first item in the layout. The order value must be a number, default value is 0.