reference

  • Flex Layout Tutorial: Syntax section
  • Flex Layout Tutorial: Sample article
  • Flex -grow and flex-shrink
  • Flex layout debugging tool

introduce

Traditional layout schemes, based on the box model, rely on display, position, and float properties. For some special layouts (such as vertical center), it is difficult to implement.

In 2009, THE W3C proposed a new layout scheme called Flex layout (Flexible Box layout), which is more Flexible and easier than the traditional layout scheme. Currently, the Flex layout is supported by all browsers.

Setting the display attribute of the element to flex or inline-flex enables the Flex layout:

// Block level elements
.block-box {
  display: flex;
}

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

At the same time, the element automatically becomes a Flex container, or container for short. And all child elements of the container automatically become Flex container members, or items for short. The float, clear, and vertical-align attributes of the project will become invalid.

There are two axes in the container by default: the main axis and the side axis. The main and side axes are perpendicular to each other, similar to the X and y axes in plane coordinates. Items are automatically arranged along the main axis, and when full they are stacked along the side axis, that is, line breaking on the side axis (provided the container flex-wrap property is not nowRAP).

debugging

Use the Flex Layout online debugging tool to quickly configure and view Flex layouts:

See this article for an introduction to the tool.

Container properties

flex-direction

The flex-direction attribute determines the direction of the main axis, which in turn determines the alignment of items, and may have a value of:

.container {
  // From left to right → (default)
  flex-direction: row;

  // The main axis goes from right to left ←
  flex-direction: row-reverse;

  // Main axis from up to down ↓
  flex-direction: column;

  // In the main axis direction from bottom up ↑
  flex-direction: column-reverse;
}
Copy the code

flex-wrap

The flex-wrap attribute determines the orientation of the side axis, which in turn determines the newline orientation of the project, and may have a value of:

.container {
  // Side axis has no direction (default)
  // no line breaks
  flex-wrap: nowrap;

  // When the main axis is horizontal, the side axis is from up to down ↓
  // When the main axis is vertical, the side axis is from left to right →
  // this is equivalent to a sequential line break
  flex-wrap: wrap;

  // When the main axis is horizontal, the side axis is ↑ from bottom up
  // When the main axis is vertical, the side axis is left to right
  // reverse newline
  flex-wrap: wrap-reverse;
}
Copy the code

flex-flow

The flex-flow attribute is a short form of the Flex-direction and flex-wrap attributes and may have values of:

.container {
  // The main axis is from left to right, the side axis has no direction (default)
  // that is, the items are arranged in the direction →, no line breaks
  flex-flow: row nowrap;

  // The main axis is from left to right, and the side axis is from top to bottom
  // that is, item arrangement direction →, line break direction ↓, which is the same as modern writing direction
  flex-flow: row wrap;

  // The main axis is from left to right, and the side axis is from bottom to top
  // that is, the alignment direction of items →, newline ↑
  flex-flow: row wrap-reverse;

  // The main axis is from right to left, the side axis has no direction
  // That is, the project alignment direction ←, without line breaks
  flex-flow: row-reverse nowrap;

  // The main axis is from right to left, and the side axis is from top to bottom
  // That is, ← is the alignment direction of items and ↓ is the newline direction
  flex-flow: row-reverse wrap;

  // The main axis is from right to left, and the side axis is from bottom to top
  // That is, the project alignment direction ←, newline direction ↑
  flex-flow: row-reverse wrap-reverse;

  // The main axis is from the top down, the side axis has no direction
  // That is, the direction of the items ↓, without line breaks
  flex-flow: column nowrap;

  // The main axis direction is from top to bottom, the side axis direction is from left to right
  // That is, the arrangement direction of items ↓, newline direction →
  flex-flow: column wrap;

  // The main axis direction is from top to bottom, the side axis direction is from right to left
  // That is, the arrangement direction of items ↓, the line break direction ←, which is the same as the writing direction in ancient China
  flex-flow: column wrap-reverse;

  // The main axis is from bottom to top, and the side axis has no direction
  // that is, items are arrayed in ↑ without line breaks
  flex-flow: column-reverse nowrap;

  // The main axis is from bottom to top, and the side axis is from left to right
  // that is, items are arranged in ↑, newline direction →
  flex-flow: column-reverse wrap;

  // The main axis direction is from bottom to top, the side axis direction is from right to left
  // That is, the item alignment direction ↑, the line feed direction ←
  flex-flow: column-reverse wrap-reverse;
}
Copy the code

You can modify the flex-flow value based on the following configuration and view the corresponding effect of different values to verify the above rule:

.container {
  width: 200px;
  height: 200px;
  flex-flow: <flex-direction> | <flex-wrap>;
  .item-1..item-2..item-3 {
    width: 100px;
    height: 100px; }}Copy the code

justify-content

The context-content attribute determines how items are aligned along the main axis, and may have values of:

.container {
  // Align the starting point on the main axis (default)
  justify-content: flex-start;

  // The endpoint is aligned on the main axis
  justify-content: flex-end;

  // Align in the center of the axis
  justify-content: center;

  // The space between items is equal in the main axis direction
  justify-content: space-between;

  // In the main axis direction, the gaps on both sides of the project are equal
  justify-content: space-around;
}
Copy the code

align-content

The align-content property determines how items are aligned along the side axis (this property is invalid if the item has only one line), and its value may be:

.container {
  // If the project height is not set or is auto
  // Project stretched to full side axis (default)
  align-content: stretch;

  // Align the starting point on the side axis
  align-content: flex-start;

  // On the side axis, the endpoint is aligned
  align-content: flex-end;

  // Align the side axis in the center
  align-content: center;

  // On the side axis, the Spaces between projects are equal
  align-content: space-between;

  // In the side axis direction, the gaps on both sides of the project are equal
  align-content: space-around;
}
Copy the code

place-content

The place-content attribute is a short form of the align-content and context-content attributes, whose possible values are shown here.

.container {
  place-content: <align-content> | <justify-content>;
}
Copy the code

align-items

The align-items property determines the alignment of items in the same row along the lateral axis, i.e. the vertical alignment of items along the main axis, and its value may be:

.container {
  // If the project height is not set or is auto
  // Stretch to full line (default)
  align-items: stretch;

  // Align the starting point on the side axis
  align-items: flex-start;

  // On the side axis, the endpoint is aligned
  align-items: flex-end;

  // Align the side axis in the center
  align-items: center;

  // Align the baseline on the side axis
  align-items: baseline;
}
Copy the code

Project attributes

order

The order attribute determines the order of items along the main axis, and its value may be:

.item {
  // The smaller the value, the more advanced the items are (default: 1)
  order: <integer>;
}
Copy the code

align-self

The align-self property overrides the container’s align-items property, which may be:

.item {
  // Inherits the container's align-items property (default)
  align-self: auto;

  align-self: stretch;

  align-self: flex-start;

  align-self: flex-end;

  align-self: center;

  align-self: baseline;
}
Copy the code

flex-basis

The Flex-basis attribute overrides the width attribute (when the main axis is horizontal) or the height attribute (when the main axis is vertical) of the project. Both flex-grow and Flex-shrink in the following sections are calculated based on flex-basis, and their values may be:

.item {
  // Set to the same value as width or height (default)
  flex-basis: auto;

  flex-basis: <length>;
}
Copy the code

However, the Flex-basis attribute is still constrained by the max-width/max-height and min-width/min-height attributes.

flex-grow

The flex-grow property determines the elongation factor of the item along the main axis, which is valid only if the container has free space, and its value may be:

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

The calculation of the flex-grow property is as follows:

  1. flex-growAttribute less than or equal to0Items are not affected and will not elongate.
  2. For the remaining itemsflex-growProperty and the result is denoted assum.
  3. The following situations are discussed.

The sum 1 or higher

.container {
  display: flex;
  width: 800px;
  .item1 {
    flex-basis: 50px;
  }
  .item2 {
    flex-basis: 100px;
    flex-grow: 1;
  }
  .item3 {
    flex-basis: 150px;
    flex-grow: 3;
  }
  .item4 {
    flex-basis: 200px;
    flex-grow: 6; }}Copy the code

Calculation process:

  1. Calculate the remaining width:Remaining width = container width - total project widthSo:
    • Remaining width = 800px-500px = 300px.
  2. Calculate the weight proportion of each project:Weight = < flex - turns up >So:
    • Total weight = sum = 1 + 3 + 6 = 10.
    • Item 2 weight = 1.Weight ratio of item 2 = 1/10 = 0.1.
    • Item 3 weight = 3.Weight ratio of item 3 = 3/10 = 0.3.
    • Item 4 weight = 6.Weight ratio of item 4 = 6/10 = 0.6.
  3. Calculate the elongation width of each project:Elongation width = weight ratio * remaining widthSo:
    • Extension width of Project 2 = 0.1 * 300px = 30px.
    • Extension width of item 3 = 0.3 * 300px = 90px.
    • Extension width of item 4 = 0.6 * 300px = 180px.
  4. Calculate the extended width of each item:Stretched width = <flex-basis> + stretched widthSo:
    • Width of Project 2 after extension = 100px + 30px = 130px.
    • Width of item 3 after extension = 150px + 90px = 240px.
    • Width of item 4 after extension = 200px + 180px = 380px.

When the sum < 1

The calculation process is basically the same as that when SUM > 1, but in step 3, the elongation width of each item is sum * proportion of weight * remaining width.

flex-shrink

The Flex-shrink attribute determines the shortening factor of the project along the main axis, which is valid only when overflow occurs in the container space. Its value may be:

.item {
  // (default: 1)
  flex-shrink: <number>;
}
Copy the code

The calculation of the Flex-shrink attribute is as follows:

  1. flex-shrinkAttribute less than or equal to0The project will not be affected and will not be shortened.
  2. For the remaining itemsflex-shrinkProperty and the result is denoted assum.
  3. The following situations are discussed.

The sum 1 or higher

.container {
  display: flex;
  width: 800px;
  .item1 {
    flex-basis: 100px;
  }
  .item2 {
    flex-basis: 200px;
    flex-shrink: 6;
  }
  .item3 {
    flex-basis: 300px;
    flex-shrink: 3;
  }
  .item4 {
    flex-basis: 400px;
    flex-shrink: 1; }}Copy the code

Calculation process:

  1. Calculate overflow width:Overflow width = total project width - container widthSo:
    • Overflow width = 800px-1000px = 200px.
  2. Calculate the weight proportion of each project:Weight = <flex-shrink> * <flex-basis>So:
    • Total weight = 1200 + 900 + 400 = 2500.
    • Item 2 weight = 1200.Weight ratio of Item 2 = 1200/2500 = 0.48.
    • Item 3 weight = 900.Weight ratio of item 3 = 900/2500 = 0.36.
    • Item 4 weight = 400.Weight ratio of Item 4 = 400/2500 = 0.16.
  3. Calculate the shortened width of each item:Shortened width = weight ratio * overflow widthSo:
    • Extension width of Item 2 = 0.48 * 200px = 96px.
    • Extension width of item 3 = 0.36 * 200px = 72px.
    • Extension width of item 4 = 0.16 * 200px = 32px.
  4. Calculate the shortened width of each item:Shortened width = original width - Shortened widthSo:
    • Shortened width of item 2 = 200px-96px = 104px.
    • Width of item 3 after shortening = 300px-72px = 228px.
    • Shortened width of item 4 = 400px-32px = 368px.

When the sum < 1

The calculation process is basically the same as that when SUM > 1, but in step 3, the shortened width of each item is sum * weight proportion * overflow width.

flex

The Flex attribute is a short form of the Flex-grow, Flex-shrink, and Flex-basis attributes, and may have values of:

.item {
  Flex :0 0 auto;
  flex: none;

  // equivalent to flex:1 1 auto;
  flex: auto;

  flex: <flex-grow> <flex-shrink> <flex-basis>;
}
Copy the code