What is flex layout

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

Any container can be specified as a Flex layout

.box{
  display:flex;
}
Copy the code

Inline elements can also use Flex

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

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.

When using Flex layouts, there are two lines: the main axis (horizontal) and the cross axis (vertical), and the default is the main axis alignment

Container attribute

  • flex-direction
  • flex-wrap
  • justify-content
  • align-items
  • align-content

The flex – direction attribute

Flex-direction determines the direction of the main axis and contains four apis

  • Row (default) : axis horizontal, left to right
  • Row-reverse :(horizontal spindle direction), starting at the right end
  • Column: The main axis is vertical and the starting point is at the top
  • Column-reverse: The main axis is in the vertical direction and the starting point is below
.box{
  flex-direction:row | roe-reverse | colume | column-reverse
}
Copy the code

The flex – wrap attributes

Flex-wrap contains three apis

  • Nowrap (default) does not wrap lines
  • Wrap: The first line is at the top,
  • Wrap-reverse: newline with the first line at the bottom

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

The justify – content attribute

Illustration-content defines alignment on the main axis and contains five apis

  • Flex-start (default) : left-aligned
  • Flex-end: right-aligned
  • Center: a center
  • Space-between: both ends are aligned with equal intervals between items.
  • Space-around: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border.
.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
Copy the code

The align – the items property

Align-items define the way on the cross axis and contain 5 apis

  • Flex-start: Alignment of the starting point of the cross axes.
  • Flex-end: alignment of ends of crossed axes.
  • Center: Alignment of the midpoint of the cross axis.
  • Baseline: The baseline alignment of the first line of text of the project.
  • Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container
.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
Copy the code

The align – content attribute

The align-content property defines the alignment of multiple axes. This property has no effect if the project has only one axis. Contains six values

  • 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 midpoint 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. Therefore, the spacing between axes is twice as large as the spacing between axes and borders.
  • Stretch (default) : Axis takes up the entire cross axis.

The project properties

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

Order attribute

The order attribute defines the order of items. The smaller the value is, the more advanced it is. The default value is 0.

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

The flex – turns up properties

Flex-grow defines the scale of enlargement.

.item {
  flex-grow: <number>; /* default 0 */
}
Copy the code

If the property values are all 1, then bisect the space,

The flex – the shrink properties

Flex-shrink determines the scale of the project, which defaults to 1. If space is insufficient, the project is shrunk

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.

Negative values have no effect on this property.

Flex properties

The flex attribute is short for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 Auto. The last two attributes are optional.

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

A link to the

Flex Layout tutorial by Yifeng Ruan

Flex little game