This blog is a personal self-study record, if there is any deficiency, please criticize and correct.

Image source: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html https://blog.csdn.net/liveinmylife/article/details/51838939 notes reference is only used to self-study, non-commercial use

What is flex layout?

Flex, short for Flexible Box, is used to provide maximum flexibility to Box models.

Any container can be specified as a Flex layout.

concept

To implement flex layout, we first need to have an element that uses flex layout, called Flex Container, or “container” for short.

Each element in the container is called a Flex item, or “item” for short.

The container has two axes by default: a horizontal main axis and a cross axis.

Basic attributes

Container properties

Statement of the container

Start by declaring a container as a Flex container, in this case div class=”container”

//css
    .container {
        display: flex;
    }

//html
    <div class="container"></div>

Copy the code

flex-direction

Flex-direction determines the direction of the main axis (the alignment of items).

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}
Copy the code
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 at the right end.

Column: The main axis is in the vertical direction, and the starting point is in the upper edge.

Column-reverse: the main axis is vertical and the starting point is at the bottom.

flex-wrap

Decide whether and how to line a container when it overflows.

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}
Copy the code
Nowrap (default) : no line breaks.

Wrap: The first line is at the top.

Wrap-reverse: newline with the first line at the bottom.

flex-flow

This property is equal to the compound property of flex-direction and flex-wrap, and can be used as shorthand for both.

. Container {flex - flow: < flex - direction (here write flex - direction attribute values) > | | < flex - wrap here writing flex - > warp of attribute value; }Copy the code

justify-content

Defines the alignment of items on the main axis

The exact alignment depends on the direction of the axis, assuming that the axis is the default (left to right).

.container{
    display: flex-start | flex-end | center | space-between | space-around;
}
Copy the code
Flex-start (default) : Start alignment

Flex-end: end alignment

Center: a center

Space-between: the two ends are aligned and the spacing between items is equal

Wrap the void

Space-around: The space between the sides of each item is equal

Wrapped in voids

The result is that the space between items is twice as large as the space between items and the border.

align-items

Defines the alignment of items on the cross axis

.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}
Copy the code
Stretch (default) : Items with no height or width will stretch across the cross axis

It covers the entire height of the container

Flex-start: Alignment of the starting point of the cross axes.

Flex-end: alignment of ends of crossed axes.

Center: Aligns the center point of the cross axis.

Baseline: The baseline alignment of the first line of the item text.

align-content

Defines multi-axis (multi-row) alignment.

Its properties can be described as a combination of justify-content and align-items

Note: This will not work if there is only one axis

.container {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
Copy the code
Stretch (default) : Multiple rows fill the entire cross axis.

Flex-start: align with the starting point of the cross axis.

Flex-end: aligns with the end of the cross axis.

Center: aligns with the center point of the intersecting axis.

Space-between: aligned with both ends of the intersecting axes, with evenly distributed spacing between axes.

Space-around: The spacing on both sides of each axis is equal.

Attributes of items

Order defines the order of items

The smaller the numbers are, the more advanced they are. The default value is 0. (integer)

.item {
    order: <int>;
}
Copy the code

Flex-grow defines the size of an item

The default value is 0, that is, it will not be enlarged if there is space

If all items have the same attribute value, they divide space equally.

If one item has an attribute value of 2 and all other items are 1, the former item takes up twice as much free space as the other items.

The more the greater the

.item {
    flex-grow: <num>;
}
Copy the code

Flex-shrink defines how much of an item is shrunk

The default is 1, which means the item will shrink if there is not enough space.

If all items have an attribute value of 1, they are scaled down equally when running out of space.

If one item has an attribute value of 0 and all other items have an attribute value of 1, the former item does not shrink when space is insufficient.

The less the greater the

Negative values have no effect on this property.

.item {
    flex-shrink: <number>;
}
Copy the code

Flex-basis defines occupied space (not important)

Defines the main size that an item occupies before allocating extra space.

Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, the original size of the project.

.item {
    flex-basis: <length> | auto;
}
Copy the code

flex

Short for flex-grow, flex-shrink, and flex-basis. The default value is 0. 1 Auto

The last two attributes are optional.

.item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
Copy the code

This property has two shortcut values: auto (1 1 auto) and None (0 0 auto).

It is recommended to use this attribute in preference to writing three separate attributes, as the browser will infer related values.

Align-self controls the alignment of individual items

Controls how a single item is aligned differently from other items, overwriting the align-items property.

Its property value is the same as the property value of align-items

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