What is the difference between flex layout and traditional layout?

What is the difference between flex layout and traditional layout?

Traditional layout: based on the box model, relying on the display attribute, position attribute, and float attribute;

flex layout: flex is the abbreviation of flexible Box, meaning "flexible layout", used to provide maximum flexibility for box models.

(Recommended tutorial: css quick start)

The element set to display: flex is called a "container", and its child elements are called "items". It should be noted that after the container is set to flex layout, the float, clear and vertical-align attributes of the child elements will be invalid;

Why do we need to determine the main axis and side axis?

The main axis and side axis are determined by flex-direction (default is row) The reason why the main axis must be determined is to determine the alignment direction of the item:

If flex-direction is row or row-reverse, then the main axis is justify-content;

If flex-direction is column or column-reverse, then the main axis is align-items.

The above is the detailed content of What is the difference between flex layout and traditional layout?. For more information, please follow other related articles on the PHP Chinese website!