Flexbox layout effect code in CSS3

CSS3 contains a number of modules that are easier to use with different layouts flexbox often allow us to better manipulate the layout of his child elements, such as:

If the element container does not have enough space, we can set them on the same line without calculating the width of each element;
Can quickly get them laid out in a column;
They can be conveniently aligned to the left, right, and middle of the container;
Changing the order of their display without having to modify the structure;
If the element container sets a percentage and a window size change, the layout is not broken without frost the exact width of the element, because each child element in the container can automatically assign the container's width or height proportions.

Terminology of Lexbox

Before reading this article in detail, it is necessary for us to understand several common terms of flexbox, so as to help you understand the later text.
Telescopic container: An element with "Display:flex" or "Display:inline-flex"
Telescopic project: A child element of a telescopic container
Spindle, Spindle direction: User agent along a telescopic container of the main axis configuration telescopic project, spindle is the direction of the main axis extension.
The starting point of the spindle and the end of the spindle: the configuration of the telescopic project begins at the beginning of the main axis of the container and ends at the end.
Spindle length, Spindle length properties: Telescopic project in the direction of the spindle width or height is the main axis length of the project, the extension of the main axis length attributes are width or height properties, by which one to the direction of the main axis.
Side axis, side axis direction: the axis perpendicular to the spindle is called the side axis, is the extension of the direction of the side axis.
Side axis starting point, side axis end point: The configuration of the telescopic line filling the project starts at the side of the container and ends at the end of the side axis.
Side axis length, side axis length properties: The width or height of the telescopic project in the direction of the side axis is the side axis length of the project, and the side axis length property of the telescopic project is the "width" or "height" attribute, which is determined by the direction of the lateral axis.

Flexbox layout of CSS3

code is as follows

copy code

<div id= "Demo" > <div class= "One" ></div> <div class= "Two" ></div> <div class= "three" ></div> </div> CSS3 Code div { height:100%; } #demo { Display:flex; /* Flex | Column Width | Height * * Flex-flow:row Wrap; /* Whether to start another line | is * * width:600px; height:400px; } . One { background-color:red; Flex:auto; } . Two { Background-color:royalblue; Flex:auto; } . Three { Flex:auto; Background-color:gray; }

The effect is as follows