The basic concept

Elements with a Flex layout are called Flex containers, or “containers” for short. All of its child elements automatically become container members and are called Flex items, or “items.”

The container has two axes by default: a horizontal main axis and a vertical cross axis. The starting position of the spindle (where it intersects with the border) is called main start and the ending position is called main end; The starting position of the side axis is called cross start and the ending position is called cross end.

Container properties

  • flex-direction(Determine the main axis)
  • flex-wrap(Decide if and how to wrap lines)
  • flex-flow(isflex-directionProperties andflex-wrapShort form of property)
  • justify-content(Set the rich space management mode on the spindle)
  • align-items(Set the rich space management mode on the side axis – single row/column)
  • align-content(Set the rich space management mode on the side axis – multi-row/column)

flex-direction

Set the container’s spindle and spindle orientation

  • column-reverse: The main axis is vertical and the starting point is down.
  • column: The main axis is vertical, and the starting point is on the upper edge.
  • 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.

flex-wrap

When not all items are displayed in a container line, control whether items are displayed in a single line or in multiple lines, and specify the direction of the side axis.

When displaying items in multiple rows, items are always stacked directly above the side axis

  • nowrap(Default) : no line breaks.
  • wrap: newline, first line above.
  • wrap-reverse: newline, first line below.

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

The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is Row Nowrap.

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

justify-content

Set how rich space is managed on the spindle (horizontal center set this property)

  • flex-start(Default) : Rich space on the positive side of the main axis (left-aligned)
  • flex-end: Rich space on the opposite side of the main axis (right aligned)
  • center: Rich space on both sides of the main axis (if there is no rich space between projects, it is centered and aligned)
  • space-between: Rich space is evenly distributed between projects (rich space is 0 on both sides of the main axis)
  • space-around: All the rich space is divided into N equal parts according to the number of projects, and each part is evenly distributed on both sides of each project (the rich space on both sides of the main axis is not 0).

align-items

Set how rich space is managed on the side axis (use this property for single row/column, i.e. items can be displayed in a row/column in the container)

  • flex-start: Rich space is on the positive side of the side axis.
  • flex-end: Rich space is on the opposite side of the side axis.
  • center: Rich space on either side of the side axis (no rich space between projects)
  • baseline: Baseline alignment of the first line of the project (possible when the project height is inconsistent).
  • stretch(Default) : If the item is not set to height or is set to Auto, it will fill the entire container height.

align-content

Set how rich space is managed on the side axis (use this property if there are multiple rows/columns, i.e. the item does not show up in one row/column in the container)

  • flex-start: Rich space is on the positive side of the side axis.
  • flex-end: Rich space is on the opposite side of the side axis.
  • center: Rich Spaces are on either side of the side axis (there are no rich Spaces between projects).
  • space-between: Rich space is evenly distributed between projects (rich space is 0 on both sides of the side axis).
  • space-around: All the rich space is divided into N equal parts according to the number of projects, and each part is evenly distributed on both sides of each project (the rich space on both sides of the side axis is not 0).
  • stretch(Default) : Stretch, and the remaining space is evenly allocated to each row/column.

Project attributes

  • order(Specifies the order of each item in the container, the larger the order, the later the order)
  • flex-grow(Tensile factor)
  • flex-shrink(Contraction factor)
  • flex-basis(Equivalent to setting the width of the item)
  • align-self(The project controls its own rich space on side pumping)
  • flex(flex-grow.flex-shrink 和 flex-basisAs it

order

Order takes the value of a positive integer. The default value is 0, which specifies the order of each item in the container

If the items have the same order attribute value, the elements are arranged in the order in which they appear in the source code

flex-grow

Stretch factor, default is 1.

Allocate the value of the rich space to each item after calculating according to the calculation formula

  • A formula to calculate

1, calculate: available space -> Available space = (container size – Flex-basis sum of all items)

Available space: If flex-basis is not set, the available space here refers to the rich space

Container size: The width or height of the current container element

Flex-basis sum for all projects:

1. If the value of the flex-basis attribute is set, it refers to the sum of all items. 2. If the value of the Flex-basis attribute is not set, it refers to the sum of the width or height of all itemsCopy the code

2, calculate: expend space -> Expend space = (available space/total flex-grow of all projects)

Expend space: The amount of space that can be allocated to each stretch factor (flex-grow)

3, get: new size for each project -> new value for each project = (flex-basis + (scalable space x flex-grow value for the current project))

The flex – the basis:

1. The value of the flex-basis property is set. 2. The width or height of the current item is not setCopy the code

The sample

If all projects have a flex-Grow attribute of 1, they divide the remaining space equally, if any. If one project has a flex-grow attribute of 2 and all the other projects are 1, the former takes up twice as much free space as the other items.

flex-shrink

Shrink factor, default is 1

  • A formula to calculate

1. Calculation: sum of all project contraction factors multiplied by Flex-basis

The flex – the basis:

1. The value of the flex-basis property is set. 2. The width or height of the current item is not setCopy the code

2, calculation: project contraction factor -> project contraction factor = (project contraction factor * flex-basis)/the sum of the first step

The flex – the basis:

1. The value of the flex-basis property is set. 2. The width or height of the current item is not setCopy the code

3, calculation: overflow space -> overflow space = the sum calculated in the first step – the width of the container

4. Calculation: The removed space of each item -> The removed space = the space overflowed by the contraction factor x of the item

5. Get: After getting the removed space of each item, remove the space with the actual width of the item, and then get the width after the actual contraction of the item

Note: this only works if flex-wrap: nowrap

The sample

If all projects have a Flex-shrink attribute of 1, they are scaled equally when space is insufficient. 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.

flex-basis

Its default value is Auto, the original size of the project. It can be set to the same value as the width or height attribute (such as 350px), and the project will take up a fixed space

This is equivalent to setting the width of the item. When it is present with width, width is ignored

align-self

The item controls how much space it has on the side. This property overrides the value of align-items

Align -self is ignored if the margin value for the side axis of any project element is set to auto

  • auto(Default) : set to the parent elementalign-itemsValue if the element has no parentstretch.
  • With the otheralign-itemsIdentical attributes

flex

The Flex attribute is short for flex-grow, flex-shrink, and Flex-basis

The default value is 0

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

Flex: 1 allows for an equally divided layout