Flexible Layout Flex

A few days ago wrote a weird box layout, previously used in the project flexible layout flex This property, then did not delve into the various tests here, this attribute recorded in order to avoid forgetting,

Resilient layout: Provides a more efficient way to arrange, align, and allocate white space to items in a container. Even if the size of the item in the container is unknown or dynamically changing, the flexible box layout model can work properly.

Let a box have the properties of the elastic layout, to first give it a style display:flex;ok we will also see that there are written display:box/display:flexbox; in fact, they are just different periods of the norm:

• New specification: 2013 the latest version of the standard syntax is Display:flex/inline-flex;
• Intermediate Version: 2011 The grammar of unofficial norm is display:flexbox/inline-flexbox;
• Old Norm: The grammar of the 2009 norm is Display:box/inline-/box;

Containers with inline-are rendered as inline elements, not with block-level elements

There are several different ways in which Flex has been written in recent years, and there are many compatibility issues associated with it, so we have to take care of all versions in the development process, the following is the demarcation of the browser version

Chrome:+ (new)-6.1+ (NEW)3.1+(old) Firefox:+ (new) 2-(old) IE:ten4.4+ (NEW)2.1+   7.13.2+ (old)

The current version of Chrome still needs to add the prefix "-webkit-", while Firefox and Safari are still using the oldest version of the syntax. Firefox has been updated to the latest specifications, however, it is best not to use the latest specification until it is considered to be a bug-free or more stable in the actual project. Before that, Firefox still used the oldest syntax specification. Ie10 support-ms-, (mobile browser compatible with this also need time to test) first define the parent container flex box and compatible wording

display:-webkit-box; /*old version syntax: Safari, IOS, Android Browser, older WebKit browsers. */display:-moz-box; /*old version syntax: Firefox (buggy)*/display:-ms-flexbox; /*mixed version syntax: IE ten*/display:-webkit-flex; /*new version syntax: Chrome 21+*/Display:flex; /*new version syntax: Opera 12.1, Firefox 22+*/

A flexbox layout consists of a telescopic container (Flex container) and a scaling project (flex items) that all of the child elements in the telescopic container become scaling items.

A good parent container box is defined as a telescopic container, and the scaling items in it are arranged, aligned, and allocated white space as defined by the style or style that is added to the parent container.

First, these 6 attributes are added to the parent container.

Flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content

Flex-direcotion

flex-direction: Row | Row-reverse | Column | Column-reverse

Default value : Row

suitable for : Telescopic box container

Inheritance : None

Row: Horizontal left-to-right (left-aligned), arranged by default.

Row-reverse: Reverses the horizontal arrangement (right-aligned, from back to front, and the last item to the front.)

Column: vertical arrangement.

Row-reverse: Reverse the vertical arrangement, from the back to the front row, the last item on top.

Flex-wrap

flex-wrap: nowrap | Wrap | Wrap-reverse

default value : nowrap

suitable for : Flexible box model container

Inheritance : None

NoWrap: Does not wrap when child elements overflow the parent container. Wrap: Wraps automatically when a child element overflows the parent container. Wrap-reverse: Reverse wrap arrangement.

Flex-flow

flex-flow: [Flex-direction] | | [Flex-wrap]

Default value : Look at each split attribute

suitable for : Flexible box model container

Inheritance : None

[Flex-direction]: Defines the direction in which the elastic box elements are arranged. [Flex-wrap]: Defines whether the elastic box element overflows the parent container when wrapping.

Justify-content

justify-content: Flex-start | Flex-end | Center | Space-between | Space-around

default value : Flex-start

suitable for : Flexible box model container

Inheritance : None

Flex-start: The Elastic box element aligns to the starting position of the line. The boundary of the primary start position of the first child element of the row is aligned with the boundary of the primary start position of the row, and all subsequent telescopic box items are aligned with the previous item.

Flex-end: The Elastic box element aligns to the end of the line. The boundary of the primary end position of the first child element of the row is aligned with the boundary of the main end position of the row, and all subsequent telescopic box items are aligned with the previous item.

Center: The Elastic box element aligns to the middle of the row. The child elements of the row are aligned to each other and centered in the row, while the first element is equal to the margin of the primary start position of the line with the margin of the last element and the primary end of the row (if the remaining space is negative, an overflow of equal lengths is maintained).

Space-between: The elastic box elements are evenly distributed in the row. If the left-most remaining space is a negative number, or if the row has only one child element, the value is equivalent to ' Flex-start '. In other cases, the boundary of the first element is aligned with the boundary of the primary start position of the row, while the last element's boundary is aligned with the margin of the row's main end position, while the remaining telescopic box items are evenly distributed and ensure that the white space between 22 is equal.

Space-around: The elastic box elements are evenly distributed across rows, leaving half of the space between child elements and child elements. This value is equivalent to ' center ' if the left-most remaining space is a negative number, or if the line has only one telescopic box item. In other cases, the telescopic box items are evenly distributed and ensure that the space between 22 is equal, while the space before the first element and the last element are half as many other white space.

Align-items

align-items: Flex-start | Flex-end | Center | Baseline | Stretch

default value : Stretch

suitable for : Flexible box model container

Inheritance : None

Flex-start: The boundary of the starting position of the side axis (longitudinal axis) of the elastic box element is close to the start boundary of the side axis of the row.

Flex-end: The boundary of the side axis (longitudinal axis) of the elastic box element is positioned close to the end boundary of the line's side axis.

Center: The Elastic box element is centered on the side axis (vertical axis) of the row. (If the size of the row is smaller than the size of the elastic box element, it overflows the same length in two directions).

Baseline: The value is equivalent to ' flex-start ' if the inline axis of the elastic box element is the same as the side axis. In other cases, the value will participate in the baseline alignment.

Stretch: If the property value of the specified side axis size is ' auto ', its value causes the item's margin box to be as close to the size of the row as possible, but at the same time, the limit of the ' Min/max-width/height ' property is followed.

Align-content

align-content: Flex-start | Flex-end | Center | Space-between | Space-around | Stretch

default value : Stretch

suitable for: Flexible box model container with multiple lines

Inheritance : None

Flex-start: Each row is stacked to the starting position of the elastic box container. The start boundary of the side axis of the first row in the Elastic box container is close to the start boundary of the side axis of the elastic box container, and each row immediately follows the front row.

Flex-end: The rows are stacked to the end position of the elastic box container. The end boundary of the side axis of the last line in the Elastic box container is close to the end of the side axis of the elastic box container, and each row immediately follows the previous row.

Center: Each row is stacked to the middle of the elastic box container. Each row 22 is close to live at the same time in the Elastic Box Container center alignment, keep the elastic box container side axis start content boundary and the distance between the first row and the side of the container end of the content boundary and the last row of the same distance. (If the remaining space is negative, the rows are equal distances that overflow in two directions.) ）

Space-between: The rows are evenly distributed in the elastic box container. If the remaining space is negative or there is only one row in the Elastic box container, the value is equivalent to ' Flex-start '. In other cases, the start boundary of the side axis of the first row is close to the boundary of the start of the side axis of the elastic box container, the end boundary of the side axis of the last line is close to the end boundary of the side axis of the elastic box container, and the remaining rows are arranged in a flexible box window to maintain equal space between 22.

Space-around: The rows are evenly distributed in the elastic box container, with half of the space between the child elements and the child elements preserved on both ends. If the remaining space is negative or there is only one row in the Elastic box container, the value is equivalent to ' center '. In other cases, the rows are arranged in a flexible box container in a certain way to maintain equal space between 22, while the space behind the first line and the last line is half the rest of the space.

Stretch: Each row will stretch to occupy the remaining space. If the remaining space is a negative number, the value is equivalent to ' Flex-start '. In other cases, the remaining space is divided by all rows to enlarge their side axis dimensions.

More Test Examples Click to enter

Two, these 6 attributes are added to the project

Orderflex-growflex-shrinkflex-basisflexalign-self

Order

Order:<integer>

default value : 0

applies to : Elastic box model Container child elements

Inheritance : None

Value: Use integer values to define the sorting order, and the values are small in front. Can be a negative value.

Flex-grow

Flex-grow:<number>

default value : 0

applies to : Elastic box model Container child elements

Inheritance : None

Value: Defines the expansion ratio with a numeric value. Negative values are not allowed and the default value is 0;

Flex-shrink

Flex-shrink:<number>

Default value : 1

applies to : Elastic box model Container child elements

Inheritance : None

Value: Defines the shrinkage ratio using numeric values. Negative values are not allowed and the default value is 1;

Flex-basis

flex-basis:<length> | <percentage> | Auto

default value : Auto

applies to : Elastic box model Container child elements

Inheritance : None

Auto: No specific width value, depending on other property values

<length>: Defines the width with a length value. Negative values are not allowed

<percentage>: Defines the width in percent. Negative values are not allowed

Flex

Flex: none | [Flex-grow] | | [Flex-shrink] | | [Flex-basis]

Default value : Look at each split attribute

applies to : Elastic box Model sub-elements

Inheritance : None

The None:none keyword is calculated as: 0 0 Auto

[Flex-grow]: Defines an extended ratio of elastic box elements.

[Flex-shrink]: Defines the shrinkage ratio of the elastic box element.

[Flex-basis]: Defines the default datum value for the elastic box element.

Algin-self

align-self: Auto | Flex-start | Flex-end | Center | Baseline | Stretch

default value : Auto

applies to : Elastic box Model sub-elements

Inheritance : None

Auto: If the value of ' align-self ' is ' auto ', it evaluates to the ' Align-items ' value of the element's parent element, and if it does not have a parent element, the value is ' stretch '.

Flex-start: The boundary of the starting position of the side axis (longitudinal axis) of the elastic box element is close to the start boundary of the side axis of the row.

Flex-end: The boundary of the side axis (longitudinal axis) of the elastic box element is positioned close to the end boundary of the line's side axis.

Center: The Elastic box element is centered on the side axis (vertical axis) of the row. (If the size of the row is smaller than the size of the elastic box element, it overflows the same length in two directions).

Baseline: The value is equivalent to ' flex-start ' if the inline axis of the elastic box element is the same as the side axis. In other cases, the value will participate in the baseline alignment.

Stretch: If the property value of the specified side axis size is ' auto ', its value causes the item's margin box to be as close to the size of the row as possible, but at the same time, the limit of the ' Min/max-width/height ' property is followed.

More Test Examples Click to enter

Flexible Layout Flex