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>
: