"CSS3 Page Layout" Flex box model

1.0 Preface

Page layout is a key application of CSS.

Classic Layout Type:

The traditional solution for layout, based on the box model, depends on the Display property + Position property + Float property. It is very inconvenient for those special layouts, for example, vertical centering is not easy to achieve.

In 2009, the website proposed a new solution----flex layout that enables easy, complete, responsive implementation of various page layouts. Currently, it has been supported by all browsers, which means that it is now safe to use this feature and has become the most popular layout.

What is the flex layout?

Flex is the abbreviation for flexible box, meaning "resilient layout", which provides maximum flexibility for box-shaped models.

Any container can be specified as a flex layout.

Inline elements can also use the flex layout.

Different browsers, you must add the corresponding prefix in order to appear the effect.

Note that when set to flex layout, the float, clear, and vertical-align properties of the child elements are invalidated.

2.0 Basic Concepts

Elements that use flex layouts, called Flex container, are referred to as "containers." All of its child elements automatically become container members, known as Flex items (Flex Item), or "project" for short.

Flex layouts:

The container has two axes by default: the horizontal spindle (main axis) and the vertical intersection axis (cross axis). The starting position of the spindle (the intersection with the border) is called main start, the end position is called the main end, the start position of the crossing axis is called Cross start, and the end position is called Cross end.

The project is arranged by default along the spindle. The main axis space occupied by a single item is called the main size, and the occupied intersection space is called cross size.

3.0 Properties of the container

The following 6 properties are set on a container

Flex-direction

Flex-wrap

Flex-flow

Justify-content

Align-items

Align-content

3.1 Flex-direction Properties

It may have a value of 4.

Row (default): The spindle is horizontal and the starting point is on the left side.

Row-reverse: The spindle is in the horizontal direction, starting at the right end.

Column: The spindle is in the vertical direction, starting at the top edge.

Column-reverse: The spindle is in the vertical direction, starting at the bottom edge.

3.2 Flex-wrap Properties

By default, items are lined up in a line (also known as the "axis"). The Flex-wrap property defines how to wrap a line if one of the axes does not fit.

It may take three values.

NoWrap (default): No Line break.

Wrap: Wrap, the first line is above.

Wrap-reverse: Line break, the first line is below

3.3 Flex-flow

3.4 Justify-content Properties

Justify-content:

It may take 5 values, and the exact alignment is related to the direction of the axis. The following assumes that the spindle is from left to right.

Flex-start (default): Left Justified

Flex-end: Right-justified

Center: Center

Space-between: Justified, the interval between items is equal.

Space-around: The intervals on each side of the item are equal. Therefore, the interval between items is one times larger than the interval between items and borders.

3.5 Align-items Properties

It may take 5 values. The specific alignment is related to the direction of the cross axis, which assumes that the intersection axis is from top to bottom.

Flex-start: The start alignment of the intersection axis.

Flex-end: The end alignment of the intersection axis.

Center: The midpoint alignment of the intersection axis.

Baseline: The baseline alignment of the first line of text for the item.

Stretch (default): If the item is not set to height or auto, it fills the height of the entire container.

3.6 Align-content Properties

This property may take 6 values.

Flex-start: Aligns with the starting point of the intersection axis.

Flex-end: Aligns with the end of the intersection axis.

Center: Aligns with the midpoint of the intersection axis.

Space-between: aligned with the intersection axis and evenly spaced between the axes.

Space-around: The intervals between each axis are equal. Therefore, the spacing between the axes is one times larger than the interval between the axes and the border.

Stretch (default): The axis fills the entire cross axis.

4.0 properties of the project

The following 6 properties are set on a project.

Order

Flex-grow

Flex-shrink

Flex-basis

Flex

Align-self

4.1 Order Property

4.2 Flex-grow Properties

Flex-grow:

If all items have a Flex-grow property of 1, they will divide the remaining space (if any). If the Flex-grow property of one project is 2 and the other items are 1, the former occupies more than the remaining space.

4.3 Flex-shrink properties

Flex-shrink:

If all items have a Flex-shrink property of 1, they will be scaled down when there is not enough space. If the Flex-shrink property of an item is 0 and the other items are 1, the former does not shrink when there is not enough space.

A negative value is not valid for this property.

4.4 Flex-basis Properties

It can be set to the same value as the width or height property (such as 350px), then the item will occupy a fixed space.

4.5 Flex Properties

This property has two shortcut values: Auto (1 1 Auto) and none (0 0 Auto).

It is recommended that you use this property instead of writing three separate properties separately, because the browser calculates the relevant values.

4.6 Align-self Properties

Align-self:

This property may take 6 values, except auto, and the other is exactly the same as the Align-items property.

"CSS3 Page Layout" Flex box model