Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

An article about learning Flex, pictures with Ruan Yifeng teacher’s picture, hee hee

1, order defines the sort order

.box{ display: flex; order: 1; // The smaller the value, the more forward}Copy the code

 

2. Proportion of flex-grow space

.box{ display: flex; flex-grow: 0; // Default value of the current element in the container, default does not enlarge}Copy the code

If all items have flex-row values of 1, all space is divided equally,

If one item has a value of 2, it is twice as wide as the others.

The default value is 0, if there is free space, the project will not be enlarged

 

3. Flex-shrink

.box{
    display: flex;
    flex-shrink: 1;
}
Copy the code

 

If all items have a value of 1, all items shrink equally when the remaining space is insufficient.

If the value of one item is 0, other items shrink when the remaining space is insufficient.

A negative value is invalid

 

4. Flex-basis space ratio

.box{
    displah: flex;
    flex-basis: auto
}
Copy the code

Record the space usage of the item before the remaining space is reallocated. The default value is Auto, which indicates the original space usage of the item.

When the value is fixed (such as 200px), it takes up a fixed space

 

Flex collection properties

.box{ display: flex; / * the default value (0 1 auto), the latter two properties optional * / flex: < flex - turns up > < flex - the shrink > | | < flex - basis >; }Copy the code

Auto (1 1 auto) None (0 0 auto)

Auto: All projects allocate all space equally

None: Indicates that all items are displayed according to their size and do not change their ratio due to free space

It is recommended to use quick values in preference to three separate values, as the browser will infer related values

 

Align-self Aligns a single item differently from other items

The default value is auto, inheritance alignment, and stretch if there is no parent element.

.box > .item{
    align-self: auto(normal) | flex-start | flex-end | center | baseline | stretch;
}
Copy the code

Except auto, all values are represented as align-items