Topic 1: Prior to the Flexbox Layout module, there were originally four layout modes.

The first was the block, which was used for sections on a webpage. The second was inline, which is used for text. A table is used for two-dimensional table data. Finally, positioned, which was for the explicit position of an element. To start using the Flexbox model, you will need to define a flex container. The properties of the flexbox are supported in all modern browsers.

Topic 2: The flex container can become flexible through the use of the display property to flex.

The flex container properties are: flex-direction, flex-wrap, flex-flow, justify-content, align-items, and align-content. The flex-direction property defines what direction the container wants to stack up the flex items. The flex-wrap property determines whether the flex items should wrap or not. The justify-content property is used to align the items chosen for flex. Align-items property is used to align the flex items, whereas align-content is the property that is used to align the flex lines.

Topic 3: Child elements (items): The direct child elements of a flex container automatically become the flexible (flex) items.

The flex item properties are the following: order, flex-grow, flex-shrink, flex-basis, flex, and align-self. The order property defines the order of the flex items. The order must be a number; the default value is 0. The flex-grow property defines how much a flex item can grow relative to the rest of the flex items, and the flex-shrink property shows how much a flex item will shrink. The “flex” property is a shorthand property for flex-grow, flex-shrink, and flex-basis. The align-self property specifies the alignment for the selected item that is inside the flexible container.