Introduction to Flexible box layouts (with code)

This article introduces to you about the flexible box layout of the introduction (with code), there is a certain reference value, the need for friends can refer to, I hope to help you.

Flexible layout

Flexible layout, also known as "Flex Layout"

Use of flexible layouts

• Adding Display:flex/inline-flex to the parent container, which allows the container content to be displayed in a flexible layout instead of following the normal flow of the document

• After the container adds the elastic layout, only the container content uses the elastic layout, and the container itself locates in the document flow still follows the regular document flow;

• Display:flex; The container is displayed as a block-level element after the elastic layout is added;

Display:inline-flex; The container is displayed as a row-level element after the elastic layout is added;

• When set to flex layout, the float, clear, and vertical-align properties of child elements are invalidated. However, the position attribute is still in effect.

The code is as follows:

<! DOCTYPE html>
：