CSS Flexible box Flexbox layout detailed

The traditional solution for layout, based on the box model, depends on the Display property + Position property + Float property. It is very inconvenient for those special layouts, for example, vertical centering is not easy to achieve.

In 2009, a new scheme--flex layout was proposed, which could implement various page layouts in a simple, complete and responsive way. Currently, it has been supported by all browsers, which means that this feature is now safe to use.

The following are the main references: Flex Layout Tutorial: Grammar Chapter

First, what is the flex layout?

Flex is the abbreviation for flexible box, meaning "resilient layout", which provides maximum flexibility for box-shaped models.
Any container can be specified as a flex layout.

.box{  display: flex;}

Inline elements can also use the flex layout.

.box{  display: inline-flex;}

WebKit the kernel browser, you must -webkit prefix it.

.box{  display: -webkit-flex; /* Safari，Chrome */  display: flex;}

Note that when set to flex layout, the float, clear, and vertical-align properties of the child elements are invalidated.

1.1 Basic concepts

Elements that use flex layouts, called Flex container, are referred to as "containers." All of its child elements automatically become container members, known as Flex items (Flex Item), or "project" for short.

The container has two axes by default: the horizontal spindle (main axis) and the vertical intersection axis (cross axis). The starting position of the spindle (the intersection with the border) is called main start , the end position is called main end ; the start position of the intersection axis is called cross start , the end position is called cross end .
The project is arranged by default along the spindle. The main spindle space occupied by a single item is called the main size occupied cross-axis space cross size .

Second, the Flex layout benefits

Flexbox usually allows us to better manipulate the layout of his child elements, for example:

• If the element container does not have enough space, we can set them on the same line without having to calculate the width of each element;
  
  • Can quickly get them laid out in one column;
  • They can be conveniently aligned to the left, right, middle, etc. of the container;
  • You can change their display order without modifying the structure;
  • If the element container sets a percentage and the window size changes, the layout is not broken without frost the exact width of the element, because each child element in the container can automatically allocate the scale of the container's width or height.

Third, Flex container properties

In addition to the display open container, the following 6 properties are set on the container "old version".

1. Flex-direction: The direction of the spindle (that is, the direction of the project). "Box-orient"
2. Flex-wrap: How to wrap a line if one of the axes does not fit. "Box-lines"
3. The Flex-flow:flex-direction property and the abbreviated form of the Flex-wrap property, the default value is row nowrap
4. Justify-content: Alignment of the project on the spindle. "Box-pack"
5. Align-items: How the item is aligned on the intersection axis. "Box-align"
6. Align-content: Defines the alignment of multiple axes. If the item has only one axis, this property does not work.

3.1 Display

Defines a flex container that determines whether inline or block is based on the value it takes. The Flex container creates a new scalable formatting context for its contents.

.container {  display: flex; /* or inline-flex */}

Open Flex container: Make an element into a telescopic container

3.2 Flex-direction specifying the telescopic flow direction of the telescopic container spindle

This is used to create a square axis, which defines the direction in which the Flex project is placed in the Flex container. Flexbox is a single-direction layout concept. It is considered that the Flex project is arranged in either a horizontal or vertical column arrangement.

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

• Row (default): If the writing method is ltr, the Flex project is left-to-right, and if the writing method is RTL, the Flex project is arranged from right to left
• Row-reverse: If the writing method is ltr, the Flex project is arranged from right to left, and if the writing method is RTL, the Flex project is arranged from left to right
• Column: Similar to row, except that the direction is arranged from top to bottom
• Column-reverse: Similar to Row-reverse, except that the direction is arranged from the bottom up

3.3 Flex-wrap Specifies whether the scaling item is aligned along the side axis

By default, Flex projects are displayed on a single line whenever possible. You can change the value of the Flex-wrap property to make the Flex project display multiple lines. Direction in this also plays an important angle, deciding on a new line stacking direction.

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

• NoWrap (default): Single-line display, if the Ltr,flex item is written in a left-to-right order, or RTL, right-to-left
• Wrap: Multi-line display, if written in Ltr,flex items from left to right, RTL, right-to-left
• Wrap-reverse: Multi-line display, if the writing method is Ltr,flex items from right to left, reverse RTL, from left to right

3.4 Flex-flow (for Flex container elements)

This is an abbreviation for the two attributes of Flex-direction and Flex-wrap. Two properties determine the spindle and side axis of the telescopic container. The default value is row nowrap (the middle is separated by a space).

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

Aligning and scaling projects on the 3.5 justify-content spindle

Used to align the telescopic project on the spindle. This behavior occurs after all the extendable lengths and all the automatic margins are interpreted. This property allocates extra space when all the scaling items on a row are not scalable or scalable but have reached their maximum length. This property also imposes some control on the alignment of the item when the item overflows a row.

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

• Flex-start (default): The scaling item is aligned to the start of a line. The line's first telescopic item is aligned at the margin of the start of the spindle with the line at the beginning of the spindle, and all subsequent scaling items are aligned with the previous item.
• Flex-end: The scaling item is aligned to the end of the line. The line's last telescopic item is aligned at the edge of the spindle's end point with the line at the end of the spindle, and all the preceding scaling items are aligned with the subsequent item.
• Center: The telescopic project aligns to the middle of the line. The row's scaling items are aligned to each other and centered in the row, and the first item is equal to the line's edge at the beginning of the spindle, and the distance from the last item to the edge of the line at the end of the spindle (if the remaining space is negative, the length of the overflow is equal).
• Space-between: The scaling items are evenly distributed in the line. This value is equivalent to Flex-start if the remaining space is negative, or if the row has only one scaling item. In other cases, the margin of the first item at the start of the spindle is aligned with the line at the beginning of the spindle, while the last item is aligned at the margin of the spindle end with the line at the end of the spindle, while the remaining scaling items are evenly spaced to ensure that the white space between 22 is equal.
• Space-around: The scaling items are evenly distributed across the line, leaving half the space on both ends. If the remaining space is negative, or if the row has only one scaling item, the value is equivalent to center. In other cases, the scaling project ensures that the space between 22 is equal, while the space in front of the first element and the last element are evenly distributed over half the other white space.

3.6 Align-items Specify the scaling items along the side axis alignment

The scaling item can be aligned on the side axis of the current row of the telescopic container, similar to the Justify-content property, but in the other direction. Align-items can be used to set the alignment of all items in a telescopic container that include an anonymous scaling item.

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

• Flex-start: The outer margin of the starting edge of the side axis of the telescopic item is close to the side where the line starts at the side axis.
• Flex-end: The telescopic item is at the edge of the end of the side axis by the margin of the line at the end of the side axis.
• Center: The margin box for the telescopic project is centered on the side axis of the row. (If the size of the telescoping row is smaller than the scaling item, the scaling item overflows the same amount in two directions).
• Baseline: This value is equivalent to Flex-start if the inline and lateral axes of the flex project are the same. In other cases, the value will participate in the baseline alignment. All scaling items that participate in the alignment are arranged in the following way: The baseline of these scaling items is first aligned, and then the item with the longest margin from the baseline to the start edge of the side axis will close to the edge of the row at the start of the side axis.
• Stretch: If the value of the side axis length property is auto, this value causes the size of the item's margin box to be as close to the size of the row as possible under the limits of the Min/max-width/height property.

Alignment of multiple axes of 3.7 align-content

When there is extra space on the side axis of the telescopic container, the Align-content property can be used to adjust the alignment of the telescopic row in the telescopic container, which is similar to the Justify-content property of aligning the scaling item on the spindle.

Note that this property has no effect on a single row of telescopic containers.

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

• Flex-start: The rows are stacked to the start position of the telescopic container. The first line in the telescopic container is adjacent to the edge of the start of the side axis, and each row immediately follows the front row.
• Flex-end: The rows are stacked to the end position of the telescopic container. The last line in the telescopic container is adjacent to the edge of the end of the side axis at the end of the side axis, and each row immediately follows the next row.
• Center: Each row is stacked to the middle of the telescopic container. Each row 22 is in close proximity and is aligned in the telescopic container at the same time, keeping the distance between the content edge and the first row of the telescopic container at the beginning edge of the side axis and the distance between the content edge of the container at the end of the side axis and the last row. (If the remaining space is a negative number, the stacking of the row will overflow the equal distance in two directions.) ）
• Space-between: The rows are evenly distributed across the telescopic container. If the remaining space is negative or there is only one row in the scaling container, the value is equivalent to Flex-start. In other cases, the edge of the first line at the beginning of the side axis is adjacent to the content edge of the telescopic container at the beginning of the side axis, and the last line at the end of the side axis is adjacent to the content edge of the telescopic container at the end of the side axis, and the remaining rows are arranged in a space equal to 22.
• Space-around: The rows are evenly distributed across the telescopic container, with half the space on each side. If the remaining space is negative or there is only one row in the scaling container, the value is equivalent to center. In other cases, the rows are equal in space between 22 and the first row and the last row are arranged in half the space behind the other.
• Stretch: Each row will stretch to occupy the remaining space. If the remaining space is a negative number, the value is equivalent to Flex-start. In other cases, the remaining space is divided by all rows, enlarging the side axis dimensions of each row.

Note: Only multiple rows of telescopic containers will have extra space on the side axis for alignment, because only one row of the telescopic container is included, and the only row is automatically stretched to fill all the space.

Iv. Flex Project Properties

The following 6 properties are set on a project.

1. Order
2. Flex-grow
3. Flex-shrink
4. Flex-basis
5. Flex
6. Align-self

4.1 Order Item Flow arrangement

By default, flex projects are sorted by the flow order of the document source. However, in a flex container, you can control the order source of the Flex project through the Order property.

.item {  order: <integer>;}

Reorder the scaling items according to order. A scaling project with the smallest (negative maximum) order is ranked first. If more than one item has the same order value, the items are sorted according to the file order. This step affects the order of the boxes in the box tree of the Telescopic project, and also affects how the subsequent algorithms handle each item.

4.2 Flex-grow Flex Project Expansion ratio

If necessary, Flex-grow can define a scaled-up scale for a flex project. It accepts a value that has no unit as a scale. It can use the Flex project to fully occupy the space available to the Flex container.

If the flex-grow of all flex projects is set to 1 o'clock, the flex projects in the Flex container have equal dimensions. If you set the value of Flex-grow to one of the flex projects to 2, the Flex project will be twice times the size of the other Flex project (the Flex-grow value for the other Flex projects is 1).

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

Note: A negative value of flex-grow is invalidated.

4.3 Flex-shrink Flex Project scaling down.

If necessary, Flex-shrink can define the scaling of the Flex project.

.item {  flex-shrink: <number>; /* default 1 */}

Note: A negative value of flex-shrink is invalidated.

If all items have a Flex-shrink property of 1, they will be scaled down when there is not enough space. If the Flex-shrink property of an item is 0 and the other items are 1, the former does not shrink when there is not enough space.

4.4 Flex-basis Project occupies the main spindle space

The Flex-basis property defines a default size for a flex project before it allocates the remaining space in the Flex container. The main-size value causes it to have a matching width or height, but all depends on the value of the flex-direction.

.item {  flex-basis: <length> | auto; /* default auto */}

If set to 0, the content is not considered extra space around. If set to auto, additional space is distributed based on the Flex-grow value. As shown in the following:

4.5 Flex

Flex is an abbreviation for the three properties of Flex-grow,flex-shrink and Flex-basis. The second and third parameters (Flex-shrink and flex-basis) are optional values. Its default value is 0 1 auto.

.item {  flex: none | [ <‘flex-grow‘> <‘flex-shrink‘>? || <‘flex-basis‘> ]}

It is recommended that you use this shorthand property instead of setting a separate property. Note that if flex takes a value of none, it is equivalent to a value of 0 0 auto.

Note that the initial values of Flex-grow and flex-basis are different from their default values when the flex abbreviation is omitted. The design here is designed to make flex abbreviations more useful in the most common scenarios.

Flex Common values

1. flex: 0 auto,flex: initialWith the flex: 0 1 auto same. (This is also the initial value.) Determines the dimensions of an element according to the Width/height property. (If the project's spindle length property evaluates to auto, the element size is determined based on its content.) When the remaining space is positive, the scaling item cannot be scaled, but when there is insufficient space, the scaling item can shrink to its minimum value. Page authors can control the alignment of the scaling project along the spindle with the alignment-related properties and the auto value of the margin property.

2. flex: autoWith the flex: 1 1 auto same. The dimensions of the element are determined according to the Width/height property, but can be fully scaled to absorb the remaining space on the spindle. If all items are flex: auto、flex: initial or flex: none , the remaining positive space will be split to the Flex:auto item after the project size is determined.

3. flex: noneWith the flex: 0 0 auto same. The dimensions of an element are determined according to the Width/height property, but are completely non-scalable. The effect is similar to initial, but the telescopic project cannot shrink even if the space is not enough to overflow.

4. flex: <positive-number>With the flex: 1 0px same. This value makes the element scalable and sets the scaling base value to zero, causing the item to occupy the remaining space of the telescopic container based on the ratio set. If all items in a telescopic container use this mode, their size is proportional to the specified scaling ratio.
   

3.6 Align-self

The align-self is used to override the default alignment on a separate scaling project. (For an anonymous scaling project, the value of align-self is always the same as the value of the align-items of the scaling container associated with it.) ）

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

Align-self has no effect if the margin on either side of the telescopic project is auto.

If the value of Align-self is auto, its computed value is the Align-items value of the element's parent element, and if the element has no parent element, the calculated value is stretch. The Alignment property values are defined as follows:

• Flex-start: The outer margin of the starting edge of the side axis of the telescopic item is close to the side where the line starts at the side axis.
• Flex-end: The telescopic item is at the edge of the end of the side axis by the margin of the line at the end of the side axis.
• Center: The margin box for the telescopic project is centered on the side axis of the row. (If the size of the telescoping row is smaller than the scaling item, the scaling item overflows the same amount in two directions).
• Baseline: This value is equivalent to Flex-start if the inline and lateral axes of the flex project are the same. In other cases, the value will participate in the baseline alignment. All scaling items that participate in the alignment are arranged in the following way: The baseline of these scaling items is first aligned, and then the item with the longest margin from the baseline to the start edge of the side axis will close to the edge of the row at the start of the side axis.
• Stretch: If the value of the side axis length property is auto, this value causes the size of the item's margin box to be as close to the size of the row as possible under the limits of the Min/max-width/height property.

Note: This may cause the content of the scaling item to overflow the item if the scaling height is limited.

Flex's behavior is to keep the box as full as possible, so with flex we have the assurance that the element is filled with rows. But the elements that set the flex are not too much for width, so use more serious max-width and min-width to set it up. Here are the effects:

A row displays more elements when the width is sufficient, and fills as many lines as possible while ensuring that the element size is within the limit. Here's the code:

<style>    ul {  border:1px solid red;         padding:0px;         display:flex;         list-style:none;     flex-flow:row wrap; }    ul Li {flex : 1   ; min-width : 5 0  px  ; max-width : 8 0  px  ; height :   px  ; background :  #CCC   ; margin :  4  px  ;   </style><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

CSS Flexible box Flexbox layout detailed