preface

Because Flex layouts have better page rearrangement performance, and just by learning a few CSS properties, you can write clean, elegant page layouts. Therefore, mastering Flex is the best way to learn CSS layout first.

Basic Flex concepts

Flex is an acronym for Flexible Box, and is used to provide maximum flexibility to Box models. Elements that use Flex layout are called Flex containers.

There are two axes in the Flex container, and the default Settings are the main axis and the vertical cross Axis. We can change the vertical direction to main axis and the horizontal direction to cross axis.

Do not assume that the width of the page is the main axis and the height is the vertical cross axis. This depends on the direction of the main axis of the current page. If the vertical direction is the main axis, then the height of the page is the main axis.

In a Flex container, each unit block is called a Flex item, and each item occupies a main size of axis space and a cross size of axis space.





Flex container

Implementing a Flex layout requires specifying a container. Any container can be specified as a Flex layout so that elements within the container can be laid out using Flex. If you use block elements such as div, you can use Flex, and if you use inline elements, you can use inline-flex.

.container {
  display: flex | inline-flex;
}
Copy the code


Note that the float, clear, and vertical-align properties of each cell block will be invalidated when the container layout is set to Flex.

There are currently six properties that can be set on containers:

  • 1.flex-direction
  • 2.flex-wrap
  • 3.flex-flow
  • 4.justify-content
  • 5.align-items
  • 6.align-content



1.flex-direction

Determine the direction of the main axis (that is, the alignment of items), with the following values

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
Copy the code





2.flex-wrap

Determines whether items in the container are newline. By default, flex-items are placed on the horizontal main axis and have the following values

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
Copy the code





3.flex-flow

Short for flex-direction and flex-wrap, not very useful. I’ll just separate what I normally write, so I don’t have to remember this property.

.container {
  flex-flow: <flex-direction> || <flex-wrap>;
}
Copy the code




4.justify-content

Defines the alignment of items on the main axis. There are the following values

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

Flex -direction: row; flex-direction: row; . Rotate the following image 90 degrees to the right to get Flex-direction: colum; The effect of





5.align-items

Defines the alignment of items on the cross axis. There are the following values

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
Copy the code

Flex -direction: row; flex-direction: row; .





6.align-content

Defines the alignment of multiple axes, which will not work if the project has only one axis.

For example, when flex-wrap is set to NowRAP, there is only one axis in the container, because the project does not wrap, so there are no multiple axes. When flex-wrap is set to wrap, multiple axes may appear in the container, so you can set the alignment between the axes. There are the following values

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
Copy the code

Flex -direction: row; flex-direction: row; flex-wrap: wrap; .





The Flex project

There are currently six attributes that can be used on flex-item items:

  • 1.order
  • 2.flex-grow
  • 3.flex-shrink
  • 4.flex-basis
  • 5.flex
  • 6.align-self



1.order

Defines the order in which items are sorted in the container. The smaller the value, the higher the order. The default value is 0

.flex-item {
  order: <integer>;
}
Copy the code

In the test, in the HTML structure, although the items of -2 and -1 are placed at the bottom, they can be placed at the top due to the order set respectively.





2.flex-grow

Defines the zoom scale of the project. The default value is 0, that is, no zoom if there is free space

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





3.flex-shrink

Defines the scaling of the project. The default value is 1. If there is not enough space, the project will shrink; If the flex-shrink attribute is 0 for one project and 1 for all other projects, the former does not shrink when space is insufficient. Negative values have no effect on this property

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





4.flex-basis

Defines the amount of spindle space that the project occupies before allocating excess space. Based on this property, the browser calculates whether the spindle has excess space. Default: auto, which is the size of the item, depending on the width or height of the item.

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


When the main axis is horizontal, the project width is invalidated when flex-basis is set. Flex-basis needs to be used in conjunction with Flex-grow and Flex-shrink to be effective.

  • When the flex-basis value is 0 %, the project is considered zero-sized, so declaring the size 140px is not helpful.
  • When the flex-basis value is auto, then the size is set (say 100px) and the 100px will not be included in the remaining space.





5.flex

Short for flex-grow, flex-shrink, and flex-basis, the default value for Flex is a combination of these three attributes. Assuming the default values for the above three properties, the default value for Flex is 0 1 auto. It is recommended to use this attribute in preference to writing three separate attributes, as the browser will infer related values

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

The special values of Flex are as follows:

/* Type 1 */
.flex-item {
  flex: auto;
}
.flex-item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

/* Type 2 */
.flex-item {
  flex: none;
}
.flex-item {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

/* Type 3 */
.flex-item {
  flex: 1;
}
.flex-item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
}

/* type 4 */
.flex-item {
  flex: 0;
}
.flex-item {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 0%;
}

/* The fifth type */
.flex-item {
  flex: 0%;
}
.flex-item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
}

/* Type 6 */
.flex-item {
  flex: 24px;
}
.flex-item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 24px;
}

/* Type 7 */
.flex-item {
  flex: 2 3;
}
.flex-item {
  flex-grow: 2;
  flex-shrink: 3;
  flex-basis: 0%;
}

/* The 8th type */
.flex-item {
  flex: 11 32px;
}
.flex-item {
  flex-grow: 11;
  flex-shrink: 1;
  flex-basis: 32px;
}
Copy the code




5.align-self

The align-self property allows a single item to have a different alignment than other items, overriding the align-items property. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch.

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

This is the same as the align-items property, except that align-self applies to a single item, whereas align-items applies to all items in the container.





added

  • 1. When a container of flex – wrap to wrap | wrap – reverse, and the width of each project add up the total width of less than container width: flex – turns will work, children will be set according to flex – turns the value of the zoom (a value of 0 and negative items without magnification)
  • 2. When a container flex – wrap to wrap | wrap – reverse, and the width of each project when added up to the total width is greater than the width of the container: If the flex-grow value of each item in the current row is 0, the remaining space is saved. If the flex-grow value of each item in the current row is not 0, the remaining space is saved. If the flex-grow value of each item in the current row is 0, the remaining space is saved. The remaining space is occupied by children of flex-grow that are not 0
  • 3. When the flex-wrap container is nowRAP and the total width of each item is less than the container width: Flex-grow will work and the item will be expanded according to the value set by flex-grow (0 and negative items will not be expanded)
  • 4. When the container flex-wrap is nowRAP, and the total width of each item width is greater than the container width: Flex-shrink takes effect, and the item is shrunk according to the flex-shrink value (zero and negative shrink does not shrink). There is a special case where a horizontal scroll bar appears when flex-shrink is set to 0 for all items in the row, which means that none of the items can be shrunk
  • 5. It is easy to see that flex-shrink and Flex-grow only work in any situation at the same time. If there is enough space, flex-grow has room to grow, and if there is not enough space, flex-shrink makes the difference. , of course, the flex – the value of the wrap to wrap | wrap – reverse, that can break, since you can wrap, usually always enough space, flex – the shrink of course won’t work

Assist site

Flex layout Generator: load. IO /flexbox/ 2.Flex layout training website: flexboxfroggy.com/

Refer to the article

1. The Flex layout grammar tutorial: www.runoob.com/w3cnote/fle… 2. The 30 minutes to learn Flex layout: zhuanlan.zhihu.com/p/25303493