CSS chapter: Flex layout

1 the flex concept

CSS Elastic box layout is one of the modules of CSS, which defines a CSS box model optimized for user interface design. In the elastic layout model, the children of an elastic container can be arranged in any direction, or they can “flex” their size, either by increasing the size to fill unused space or by shrinking it to avoid overflow of parent elements. Both horizontal and vertical alignment of child elements can be easily manipulated. By nesting these boxes (horizontal boxes within vertical boxes, or vertical boxes within horizontal boxes), you can build the layout on two dimensions.

2 Flex basic model

The “main axis” is the axis that extends along the direction in which flex elements are placed (horizontal rows, vertical columns on a page, for example).
The beginning and end of the axis are called main start and main end.
The “cross axis” is the axis perpendicular to the placement direction of the Flex element.
The beginning and end of the axis are called cross start and cross end.

3 Attribute Description

The parent container

attribute	The values	describe
flex-direction	row row-reverse column column-reverse	By default, the main axis is horizontal and arranged from left to right The main axis is horizontal and is arranged from right to left The main axis is vertical and arranged from top to bottom The main axis is vertical and is arranged from bottom to top
flex-wrap	nowrap wrap wrap-reverse	The default value is displayed on the same line without newline If a line cannot be displayed, wrap it Same as wrap, but displayed from bottom up
Flex – flow (abbreviated)	flex-direction flex-wrap	The default value is row nowrap
justify-content	flex-start flex-end center space-between space-around	The default value, aligned from the start position, also known as left aligned Alignment from the end position, also called right alignment Align center Both ends are aligned and evenly spaced Child elements have equal margins. Margins for adjacent elements do not stack
align-items	stretch flex-start flex-end center baseline	Default value. If the height is not specified or the height is auto, the space is occupied Cross axes start to align Cross axis end position alignment Center aligned relative cross axes Alignment with baseline
align-content	stretch flex-start flex-end center space-between space-between	By default, the rows stretch to fill the entire cross axis space Align to cross axis starting point Align to cross axis endpoint Center alignment of relative cross axes The lines are aligned at opposite ends of the intersecting axis, and the lines are equally spaced All lines have equal margins, and the margins of the lines do not stack

children

attribute	The values	describe
flex-grow	Any positive integer	Specifies the zoom scale of the child container. Default is 0(no zoom)
flex-shrink	Any positive integer	Specifies the size of the child container to shrink by. Default: 1. A value of 0 indicates no shrink
flex-basis	atuo	The default value, atuo, defines the default size of the child container
Flex (abbreviated)	flex-grow flex-shrink flex-basis	The default value is 0
align-self	stretch flex-start flex-end center baseline	Default value. If the height is not specified or the height is auto, the space is occupied Cross axes start to align Cross axis end position alignment Center aligned relative cross axes Alignment with baseline
order	digital	The default value is 0, specifying the order of the child containers. The smaller the value, the higher the order

4 Use the parent container properties

4.1 the flex – direction

“flex-direction:row“
“The code block“

.parent {
      display: flex;
      flex-direction: row;
}
Copy the code

“flex-direction:row-reverse“
“The code block“

.parent {
      display: flex;
      flex-direction: row-reverse;
}
Copy the code

“flex-direction:column“

“The code block“

.parent {
      display: flex;
      flex-direction: column;
}
Copy the code

“flex-direction:column-reverse“

“The code block“

.parent {
      display: flex;
      flex-direction: column-reverse;
}
Copy the code

4.2 the flex – wrap

“flex-wrap: nowrap“
“The code block“

.parent {
      display: flex;
      flex-wrap: nowrap;
}
Copy the code

“flex-wrap: wrap“
“The code block“

.parent {
      display: flex;
      flex-wrap: wrap;
}
Copy the code

“flex-wrap: wrap-reverse“
“The code block“

.parent {
      display: flex;
      flex-wrap: wrap-reverse;
}
Copy the code

4.3 the justify – content

“justify-content: flex-start“
“The code block“

.parent {
      display: flex;
      justify-content: flex-start;
}
Copy the code

“justify-content: flex-end“
“The code block“

.parent {
      display: flex;
      justify-content: flex-end;
}
Copy the code

“justify-content: center“
“The code block“

.parent {
      display: flex;
      justify-content: center;
}
Copy the code

“justify-content: space-between“

“The code block“

.parent {
      display: flex;
      justify-content: space-between;
}
Copy the code

“justify-content: space-around“

“The code block“

.parent {
      display: flex;
      justify-content: space-around;
}
Copy the code

4.4 the align – items

“align-items: stretch“Do not fix the child container height
“The code block“

.parent {
      display: flex;
      align-items: stretch;
}
Copy the code

“align-items: flex-start“
“The code block“

.parent {
      display: flex;
      align-items: flex-start;
}
Copy the code

“align-items: flex-end“
“The code block“

.parent {
      display: flex;
      align-items: flex-end;
}
Copy the code

“align-items: center“
“The code block“

.parent {
      display: flex;
      align-items: center;
}
Copy the code

“align-items: baseline“

“The code block“

.parent {
      display: flex;
      align-items: baseline;
}
Copy the code

4.5 the align – content

❝

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

❞

“align-content: stretch“
“The code block“

    .parent {
      display: flex;
      flex-wrap: wrap;
      align-content:stretch;
    }
Copy the code

“align-content: flex-start“

“The code block“

    .parent {
      display: flex;
      flex-wrap: wrap;
      align-content:flex-start;
    }
Copy the code

“align-content: flex-end“

“The code block“

    .parent {
      display: flex;
      flex-wrap: wrap;
      align-content:flex-end;
    }
Copy the code

“align-content: space-between“
“The code block“

    .parent {
      display: flex;
      flex-wrap: wrap;
      align-content:space-between;
    }
Copy the code

“align-content: space-around“

“The code block“

    .parent {
      display: flex;
      flex-wrap: wrap;
      align-content:space-around;
    }
Copy the code

5 Use child container properties

5.1 the flex – turns up

“rendering“
“The code block“

    /* Allocate space proportionally */
    .parent {
      display: flex;
    }

 .son1 {  flex-grow: 1;  }   .son2 {  flex-grow: 0;  }   .son3 {  flex-grow: 2;  } Copy the code

5.2 the flex – the shrink

“rendering“
“Allocation rules“

If all child containers have a Flex-shrink attribute of 1, they are scaled equally when space is insufficient.
If the flex-shrink attribute is 0 for one or more child containers, the zero shrink attribute does not shrink.

“The code block“

    .parent {
      display: flex;
    }

    .son1 {
 flex-grow: 1;  }   .son2 {  flex-grow: 0;  }   .son3 {  flex-grow: 2;  } Copy the code

5.3 the flex – basis

“rendering“
“Allocation rules“

I’m free to allocate it based on how much space I have.

“The code block“

    .parent {
      display: flex;
    }

    .son1 {
 flex-basis: auto;  }   .son2 {  flex-basis: 0;  }   .son3 {  flex-basis: 200px;  } Copy the code

5.4 the align – self

“align-self: stretch“

“The code block“

    .parent {
      display: flex;
    }

    .son1 {
 align-self: stretch;  }   .son2 {  align-self: auto;  }   .son3 {  align-self: auto;  } Copy the code

“align-self: flex-start“

“The code block“

    .parent {
      display: flex;
    }

    .son1 {
 align-self: flex-start;  }   .son2 {  align-self: auto;  }   .son3 {  align-self: auto;  } Copy the code

“align-self: flex-end“

“The code block“

    .parent {
      display: flex;
    }

    .son1 {
 align-self: flex-end;  }   .son2 {  align-self: auto;  }   .son3 {  align-self: auto;  } Copy the code

“align-self: center“

“The code block“

    .parent {
      display: flex;
    }

    .son1 {
 align-self: center;  }   .son2 {  align-self: auto;  }   .son3 {  align-self: auto;  } Copy the code

“align-self: baseline“

“The code block“

    .parent {
      display: flex;
    }

    .son1 {
 align-self: baseline;  }   .son2 {  align-self: auto;  }   .son3 {  align-self: auto;  } Copy the code

5.4 the order

“rendering“

“The code block“

    .parent {
      display: flex;
    }

    .son1 {
 order: 0  }   .son2 {  order: -1  }   .son3 {  order: -2  }   .son4 {  order: 1  }   .son5 {  order: 2  } Copy the code

6 Flex Common Layout

6.1 Horizontal and vertical center

“rendering“

“The code block“

    .parent {
      display: flex;
    }

    .son {
 margin: auto;  }  或  .parent {  display: flex;  justify-content: center;  align-items: center;  }  或  .parent {  display: flex;  justify-content: center;  }   .son {  align-self: center;  } Copy the code

6.1 Two-column Layout

“The left side is fixed and the right side is adaptive“

“The code block“

    .parent {
      display: flex;
      justify-content: center;
    }

 .left {  width: 100px;  }   .right {  flex-grow: 1;  } Copy the code

“Left side is not fixed, right side is adaptive“

“The code block“

    .parent {
      display: flex;
    }
    .right {
      flex-grow: 1;
 } Copy the code

6.2 Three-column Layout

“Left side fixed, middle adaptive, right side fixed“

“The code block“

    .parent {
      display: flex;
    }
    .left {
      width: 100px;
 }  .middle {  flex-grow: 1;  }  .right {  width: 100px;  } Copy the code

6.2 Nine-grid layout

“rendering“

“The code block“

  <div class="parent">
    <div class="son">son</div>
    <div class="son">son</div>
    <div class="son">son</div>
    <div class="son">son</div>
 <div class="son">son</div>  <div class="son">son</div>  <div class="son">son</div>  <div class="son">son</div>  <div class="son">son</div>  </div> Copy the code

    .parent {
      display: flex;
      flex-wrap: wrap;
    }

 .son {  width: calc(calc(100% / 3) - 10px);  margin: 5px;  height: 100px;  background-color: #fda085;  border-radius: 10px;  display: flex;  justify-content: center;  align-items: center;  } Copy the code

7 Flex Compatibility

Mobile terminal support friendly, PC terminal recommended positioning
For flex compatibility, see MDN Can I Use

After the language

No bug, no front-end, well, this article is written here, the first time to write an article a little nervous, but also hope you big guy, welcome to put forward valuable suggestions in the comments area. I will update some front-end knowledge content and articles from time to time, and your encouragement is the motivation for my creation.

❝

Roses on the hand, fragrance on the hand — an old Indian proverb

❞

Please scan the QR code of wechat group if you are interestedReference links:

Fix the Flex layout once and for all

MDN

Flex layout study Notes

This article is formatted using MDNICE