CSS3 elastic box model flex box Quick Start 2016.03.16, css32016.03.16

CSS3 elastic box model flex box Quick Start 2016.03.16, css32016.03.16
Start learning flex for Mobile front-end projects ~! With flex, you no longer have to worry about formatting. Let's get started quickly! Use the flex syntax on css

For example, in the following html code, ul is the parent element and li is the child element.

<Ul class = "example">
<Li> a </li>
<Li> B </li>
<Li> c </li> </ul>

Use flex to add the following css styles to the parent element:

. Example {
Display: flex;
Display: ">/* compatible with chrome */
Display:-moc-flex;/* compatible with firefox */
Display:-o-flex;/* compatible with opera */
} Flex-direction
(Applicable to parent container elements) flex-direction: row;

• A
• B
• C

Flex-direction: row-reverse;

• A
• B
• C

Flex-direction: column;

• A
• B
• C

Flex-direction: column-reverse;

• A
• B
• C

Flex-wrap
(Applicable to parent container elements) sets or retrieves whether the child elements of a scaling box object wrap when they exceed the parent container.
Flex-wrap: nowrap | wrap-reverseflex-wrap: nowrap;

• A
• B
• C

Flex-wrap: wrap;

• A
• B
• C

Flex-wrap: wrap-reverse;

• A
• B
• C

Flex-flow
(Applicable to parent class container elements) is equivalent to a set of direction and wrap
Flex-flow: row nowrap;/* arranged sequentially without line breaks */
Flex-flow: row-reverse wrap;/* arranged in reverse order and automatically wrapped */justify-content
(Applicable to parent container elements) sets or retrieves alignment of an Elastic box element on the spindle (horizontal axis.
Justifu-content: flex-start | flex-end | center | space-between | space-aroundjustify-content: flex-start;

• A
• B
• C

Justify-content: flex-end;

• A
• B
• C

Justify-content: center;

• A
• B
• C

Justify-content: space-;
Space-between: elastic box elements are evenly distributed in rows. If the leftmost space is a negative number, or 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, and the boundary of the last element is aligned with the margin of the primary end position of the row, the remaining expansion box items are evenly distributed, and the blank space between the two is equal.

• A
• B
• C

Justify-content: space-around;
Space-around und: the elastic box elements are evenly distributed in the row, and the two ends retain half of the spacing between the child element and the child element. This value is equivalent to 'center' if the leftmost space is a negative number or the row has only one telescopic box project '. In other cases, the expansion box items are evenly distributed, and the blank space between the two is equal, at the same time, the space before the first element and the space after the last element are half of the space of other blank spaces.

• A
• B
• C

Align-items
(Applicable to parent container elements) sets or retrieves alignment of elastic box elements in the side axis (vertical axis) Direction.
Align-items: flex-start | flex-end | center | baseline | stretchalign-items: flex-start;

• A
• B
• C

Align-items: flex-end;

• A
• B
• C

Align-items: center;

• A
• B
• C

Align-items: baseline;
Baseline: If the row axis and side axis of an Elastic box element are the same, the value is equivalent to 'flex-start. In other cases, this value is used for baseline alignment.

• A
• B
• C

Align-items: strecth;
Stretch: if the value of the specified side axis size is 'auto', the value will make the size of the margin box of the Project as close as possible to the size of the row, but it will also comply with the 'min/max-width/height' attribute restrictions.

• A
• B
• C

Align-content
(Applicable to parent container elements) sets or retrieves the alignment of the stacked scaling rows of an Elastic box.
Align-content: flex-start | flex-end | center | space-between | space-around | stretch align-content: flex-start;

• A
• B
• C
• D
• E
• F

Align-content: flex-end;

• A
• B
• C
• D
• E
• F

Align-content: center;

• A
• B
• C
• D
• E
• F

Align-content: space-;

• A
• B
• C
• D
• E
• F

Align-content: space-around;

• A
• B
• C
• D
• E
• F

Align-content: strecth;

• A
• B
• C
• D
• E
• F

Flex-grow
(Applicable to child elements) set or retrieve the extended ratio of the elastic box. Allocate the remaining space based on the scaling factor set by the elastic box element. The default value of flex-grow is 0. If this attribute is not displayed, no space is allocated. In this example, both items B and c explicitly define flex-grow. We can see that the total space is divided into 4 parts, where B occupies 1 part and c occupies 3 points, that is
Flex-grow: (Default 0)

• A
• B
  Flex-grow: 1
• C
  Flex-grow: 2
• D
• E

Flex-shrink
(Applicable to child elements) set or retrieve the scale-in ratio of the elastic box (based on the Scale-in factor set by the elastic box element) to contract the space.
Flex-shrink: (Default 1) Flex-basis
(Applicable to sub-elements) set or retrieve the auto-box scaling reference value. If the sum of the reference values of all child elements is greater than the remaining space, the remaining space is scaled proportionally based on the reference values set for each item.
Flex-basis: (Percentages) | auto (default auto)

• A
• B
• C
  Flex-basis: 600px;
• D
• E

Flex (composite attribute)
(Applicable to child elements) flex: none | [flex-grow] | [flex-shrink] | [flex-basis]
Calculation Value of the none: none Keyword: 0 0 auto
[Flex-grow]: defines the expansion ratio of the elastic box element.
[Flex-shrink]: defines the scale-in ratio of an Elastic box element.
[Flex-basis]: defines the default reference value of an Elastic box element.