Flex elastic box

What is a elastic box

by

Container (parent element)

Item (child element)

Consisting of a

Two, if you want to write elastic box

The parent element {

display:flex;

}

Container properties

1. flex-direction

To determine the direction of the main axis (i.e. the alignment of items), common values are:

> Row (default) : the main axis is horizontal and the starting point is on the left. > Row-reverse: the main axis is horizontal and the starting point is on the right. > column: the main axis is vertical and the starting point is on the topCopy the code

2. flex-wrap

By default, items are placed on a single line without line breaks. If not, how to line breaks

> nowarp (default) : no line breaksCopy the code

> warp: newline, first line aboveCopy the code

Word-wrap: break-word! Important; "> < span style =" max-width: 100%Copy the code

3. flex-flow

It’s a combination of direction and warp

flex-flow: row warp;
Copy the code

Set both flex-direction:row and flex-wrap: warp

4. justify-content

Horizontal arrangement of child elements

.box{
    justify-content: flex-start  | flex-end | center | space-between | space-around
}
Copy the code

5. align-items

Vertical arrangement of child elements

. The box {align - content: flex - start (depend on) | flex - end (lower) | center (center) | baseline | stretch (tensile)}Copy the code

6. align-content

4. Project attributes

1. flex-grow

Defines the zoom ratio of an item. The default is 0, no zoom, and the value is the number of items in the parent elementCopy the code

2. flex-shrink

Defines the scaling of the project, as opposed to flex-grow, which defaults to 1Copy the code

3. flex-basis

Defines the principal axis space occupied by a project item before allocating extra spaceCopy the code

4. flex

Flex is short for flex-grow,flex-shrink, and flex-basis. The default value is 0, 1 auto. The latter two properties are optionalCopy the code