Deep understanding of CSS flexible Box model Flex

xTable of Contents [1] version change [2]display [3] Basic concept [4] telescopic container [5] in front of the telescopic project

CSS3 introduces a new layout model--flex layout. Flex is the abbreviation for flexible box, commonly referred to as the elastic box model. Unlike CSS3 other properties, Flexbox is not an attribute, but a module, including multiple CSS3 properties. Flex layouts provide a more efficient way to project the layout of items within a container to accommodate various types of display devices and screens of various sizes

Version alternation

The syntax specification for the Flexbox layout has changed a lot over the years. From July 2007, the first version of Flex was published, and by September 2012, the latest version of Flex became the candidate recommendation. Flex has undergone a major three editions

"1" old version Display:box | inline-box;

This version of IE does not support, and other browsers and mobile side need to add a prefix, but the mobile side can be compatible to andriod2.1 and ios3.2

"2" mixed version Display:flexbox | inline-flexbox;

This version is supported only by IE10 and requires the addition of a prefix-ms-

"3" new version Display:flex | Inline-flex

This version is compatible with ie11+, Firefox, Safari, Chrome, opera, and mobile, but the mobile side ios7.1-8.4 needs to be prefixed-webkit-

Display

To make an element into a telescopic container, you need to use the Display property. Elements that use flex layout, called Telescopic containers (Flex container), are child elements within a container called scaling items (Flex Item)

[note] The browser will wrap any contiguous block of text directly in the telescopic container into an anonymous scaling project.

Using the Flex layout implementation is to make the element FFC (Flex formatting context Scale-out), and the FFC is one of the normal streams. The floating and positioning streams and other CSS properties have an impact on the FFC, mainly in the following points:

[1]float, clear, and vertical-align properties have no effect on the scaling project

[2] The margin of the telescopic container does not overlap with the margin of its contents

[The 3]text-align property has no effect on the telescopic container, as it can only be applied to block-level blocks container

[4] Additionally, the Conlumns property has no effect on the telescopic container

The difference between the two container block-level telescopic containers and the inline telescopic containers of the elastic box model is similar to the difference between block and Inline-block, one exclusive row, the other non-exclusive row

// Elastic Box Model: block-scale telescopic container | Inline telescopic container // new version Display:flex | inline-Flex; // mixed version Display:flexbox | inline-Flexbox; // old version Display:box | Inline-box;

Basic concepts

The telescopic container has two axes by default: the horizontal spindle (main axis) and the vertical side axis (cross axis)

[note] The spindle direction is not necessarily horizontal, it depends primarily on the Justify-content property

The starting point of the spindle is called main start, the end of the spindle is called the main end, the side axis start is cross start, the side axis end

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

[note] The main size and cross size of the telescopic project is determined primarily by width or height

Telescopic container

The following 6 properties function on a telescopic container

Telescopic Flow Direction Flex-direction

Flex-Flow Line Wrapping Flex-wrap

Telescopic flow (including direction and line wrapping) Flex-flow

Spindle Alignment Justify-content

Side axis Alignment Align-items

Stack Stretch row align-content

"1" Telescopic flow direction: Specifies the direction of the spindle (that is, the direction in which the telescopic item is arranged in the telescopic container)

// Telescopic Flow direction: Horizontal Direction | reverse Horizontal | vertical Direction | reverse vertical // new version with mixed version flex-direction:row[default] | Row-reverse | Column | column-Reverse// old version box-orient:horizontal (horizontal) |vertical (vertical) |inline-axis[default] (inline axis direction) | block-axis (block-axis direction) box

[note] The direction of the telescopic flow is related to direction and Wrinting-mode

"2" Telescopic flow wrap: Specifies whether the scaling item wraps when it overflows the scaling container.

// Stretch Line wrap: do not wrap | line Wrap | reverse convert line // new version with mixed version flex-wrap:nowrap[default] | Wrap | wrap-Reverse// old version, no browser support Box-lines property, so in the old version can not be implemented in the extension project line-wrapping display box-lines:single[default] | multiple | N/A

[note] At this point, CSS allows you to use the overflow property to handle how overflow content is displayed

[note] The order of the telescopic items is also related to direction and Wrinting-mode

"3" Telescopic flow: abbreviation for the direction of the telescopic flow and the line wrapping of the telescopic line

// Telescopic Flow: Telescopic flow direction | Stretch Line Wrap // new version with mixed version Flex-flow: <flex-direction> | <flex-wrap> [Default] Flex-flow:row nowrap// old version no corresponding attribute

"4" spindle alignment: Used to set the alignment of the current row telescopic item in the spindle direction of the telescopic container, specifying how to distribute the extra space of the telescopic container between the scaling items

This property allocates additional space for the telescopic container when the scaled item on a row cannot be scaled or the maximum length of the scale is reached. This property also imposes some control on the alignment of the project when the scaling project overflows a row

// spindle alignment: Left align | center align | right justify | justify | spread align // new version justify-content:flex-start[default] | Center | Flex-pack | Flex-end | space-around// mixed version flex-pack:start[default] | Center | End | Justify | Distribute // old version box-pack:start[default] | Center | End | Justify | N/A

[note] Spindle alignment is related to direction, Writing-mode, Flex-flow

"5" Side axis alignment: used to set the alignment of the current row of the telescopic container in the side axis direction

// Side axis alignment: Top edge Alignment | Center alignment | bottom Alignment | baseline Alignment | Scaling Project stretching fills the entire telescopic container // new version Align-items:flex-start | Center | Flex-end | Baseline | stretch[Default] // mixed version Flex-align:start | Center | End | Baseline | stretch[Default] // old version Box-align:start | Center | End | Baseline | stretch[Default]

[note] If the scaling item has the Width/height property will take precedence over the way the side axis is aligned to Extrude

[note] The side axis alignment is related to direction, Writing-mode, Flex-flow

"6" Stack stretch line: Specifies the alignment of multiple scaling item rows in the side axis

// Side axis alignment: Top edge Alignment | Center alignment | bottom Alignment | justify | diffusion Alignment | Telescopic Project stretching fills the entire telescopic container // new version Align-content:flex-start | Center | Flex-end | Space-between | Space-around | stretch[Default] // mixed version Flex-line-pack:start | Center | End | Justify | Distribute | stretch[Default] // old version has no corresponding attribute

[note] This property is only available in Flex-wrap:wrap | Wrap-reverse, and when there are many lines in the scaling project, it takes effect

[note] Stack stretch lines are related to direction, Writing-mode, Flex-flow

Telescopic Project

A scaling project is a child element of a telescopic container. The text in the telescopic container is also considered a scaling item. The following 6 properties are set on a scaling project.

Self Side axis alignment Align-self

Telescopic reference value Flex-basis

Extended ratio Flex-grow

Shrinkage ratio Flex-shrink

Flexible Flex

Display order

"1" Self side axis alignment: the alignment of a single telescopic item on the side axis, which overrides the side axis alignment of the telescopic container

[note] For an anonymous scaling project, the value of align-self is always the same as the value of the align-items of the scaling container associated with it

// Side axis alignment: Auto | top edge Alignment | Center alignment | bottom Alignment | baseline Alignment | Scaling Project stretching fills the entire telescopic container // new version align-self:auto[default] | Flex-start | Center | Flex-end | Baseline | Stretch // Mixed version flex-item-align:auto[default] | Start | Center | End | Baseline | Stretch // old version has no corresponding attribute

[note] If the value of Align-self is auto, its calculated value is the Align-items value of the scaling container for the scaling project

[note] If the margin on either side of the telescopic project is auto, the scaling item is centered within the remaining space of the telescopic container, and align-self has no effect.

"2" scaling reference: The initial size of the telescopic project in the spindle direction

// new version flex-basis: <length> | auto[Default] // Mixed version Positive-flex: <number>[default = 1]// old version no corresponding attribute

If the value of Flex-basis is 0, it means that the initial size of the telescopic item in the spindle direction is 0, then all the space is allocated, and if the value of Flex-basis is auto, the initial size of the telescopic item in the spindle direction is the size of itself, then the remaining space is allocated

[Note that the <length> value of the]flex-basis can be a number followed by PX, EM, etc., or a percentage, relative to the spindle length of its parent telescopic container.

"3" expansion ratio: when the additional space of the telescopic container is positive, the scaling item is proportional to the amount of space that can be extended by other scaling items in the telescopic container

// new version Flex-grow: <number>[default = 0]// mixed version Positive-flex: <number>[ Default is 0]// old version no corresponding attribute

A value of Flex-grow of 0 means that even if the remaining space is not magnified, and if all items have a Flex-grow property of 1, they will divide the remaining space (if any); if the Flex-grow property of an item is 2, the other items are 1, The former occupies more than the rest of the space.

"4" shrinkage ratio: when the additional space of the telescopic container is negative, the scaling item is proportional to the amount of space that can be contracted by other telescopic items in the telescopic container

// new version Flex-shrink: <number>[default = 1]// mixed version Negative-flex: <number>[ Default is 0]// old version no corresponding attribute

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.

[note] The scaling reference value, the expansion ratio, and the shrinkage ratio can all be decimals, but not negative

"5" Scalability: an abbreviation for the expansion ratio, shrinkage ratio, and scaling reference value

Flex:none = Flex:0 0Auto; Flex:auto= Flex:1 1Auto; Flex:0= Flex:0 1 0%; Flex:1= Flex:1 1 0%; Flex:0Auto = Flex:0 1Auto; Flex:0 1= Flex:0 1 0%;

[note] When flex is the keyword None or auto is present, flex-basis is auto; If Flex has only a numeric value, Flex-basis is 0%;

// new version flex:none[default] | [<flex-grow> <flex-shrink>? | | <flex-basis>] // Mixed version flex:none[default] | [<pos-flex> <neg-flex>? | | <preferred-size>] // old version Box-flex: <number>[default is 0]

"6" Display order: Defines the order of the scaling items, the smaller the number, the more forward the arrangement

　　Note scaling items in telescopic containers The default display order is to follow the order in which the documents appear in the source code (the order in the DOM structure of the HTML document)

// new version order: <number>[default = 0]// mixed version flex-order: <number>[default = 0]  // old version Box-ordinal-group: <integer>[default is 1]

[Note that the]order property value can be negative, but cannot be a decimal

Deep understanding of CSS flexible Box model Flex