flex and grid

1. Brief introduction

1.1 flex

Flexible layout can only handle one-dimensional layout

Container properties

• flex-direction: The direction in which child elements are arranged , default row
• flex-wrap: Arrangement method when there is too much content in a line, that is, line wrapping, no line wrapping,
• flex-flow: is the abbreviation of flex-directionattribute and attributeflex-wrap
• justify-content: horizontal alignment
• align-items: vertical alignment
• align-content: The alignment method of multiple axes , that is, the alignment method that only takes effect when there are multiple lines.
• order: Define the order in which elements are arranged . The smaller the value, the higher the ranking. The default is 0.
• flex-grow: If there is remaining space, adaptively expand . The default is 0, which means no expansion.
• flex-shrink: If there is insufficient space, adaptively shrink , the default is 1, that is, if there is insufficient space, shrink
  flex-basis: The initial size of the element , the default is auto, and its width or height is used by default (depending on the flex-direction attribute)
• flex: is the abbreviation of flex-grow, flex-shrinkand flex-basis, the default value is0 1 auto

child element attributes

• align-self: A single child element has a different alignment than other elements and can override align-itemsattributes.

---

1.2 grid

Grid layout can handle two-dimensional layout.
The difference with flex: flexit can only handle layout in one dimension, that is, rows or columns, but gridthe container can be divided into rows and columns and appear in the form of cells.

Container properties

• grid-auto-flow: arranged sequentially , has flex-directionthe same function as row, defaults to row
• grid-template-rows: row height of each row , usage: repeat method, auto-fill, fr, auto
• grid-template-columns: Column width of each column , usage: repeat method, auto-fill, fr, auto
• row-gap: spacing between rows
• column-gap: spacing between columns
• gap: It is an abbreviation of row-gapandcolumn-gap
• justify-items: horizontal alignment
• align-items: vertical alignment
• place-items: It is shorthand for the justify-itemsand align-itemsattributes.
• justify-content: Sets the horizontal alignment of the entire content area within the container
• align-content: Set the vertical alignment of the entire content area within the container
• place-content: It is short for align-contentandjustify-content
• grid-auto-columns: Column width of extra child elements
• grid-auto-rows: row height of extra child elements
• grid-template: It is an abbreviation for grid-template-columns, grid-template-rowsand grid-template-areas.
• grid: It is the abbreviation of grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns.grid-auto-flow
• grid-template-areas: grid-areasUsed in conjunction with to define grid areas

Attributes of child elements (gird items)

• grid-column-start, grid-column-end and grid-row-start, grid-row-end, these are the starting and ending grid lines of the child elements.
• grid-column: is the abbreviation of grid-column-startand grid-column-end.
• grid-row: is the abbreviation of grid-row-startand grid-row-end.
• justify-self: Sets the horizontal position of a single sub-element content , the justify-itemssame as
• align-self: Sets the vertical position of a single sub-element content , the align-itemssame as
• place-self: is the abbreviation of align-self andjustify-self
• grid-areas: grid layout, grid-template-areas used in conjunction with

---

---

2. Detailed introduction of flex and grid

2.1 flex

Flex is the abbreviation of Flexible Box, which means "flexible layout" and is used to provide maximum flexibility for box-shaped models.
Any container can be designated as a Flex layout.
Inline elements can also use Flex layout. Note : If set to Flex layout, the attributes of the child elements floatwill clearbe invalid.

 .box{
    
    
   display: flex;
 }
.box1 {
    
    
   display: inline-flex;
 }

2.2 Basic concepts

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

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

2.3 Container properties

The following 6 properties are set on the container.

• flex-direction: The direction of the main axis (that is, the arrangement direction of items).
• flex-wrap: Arrangement method when there is too much content in a row
• flex-flow: is the abbreviation of flex-directionattribute and attributeflex-wrap
• justify-content: Alignment on the main axis
• align-items: How to align on the cross axis
• align-content: Alignment of multiple axes

2.3.1 flex-direction property

flex-directionThe property determines the direction of the main axis (that is, the direction in which items are arranged).

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

It may have 4 values.

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

Note: When the distribution width and height are not enough, the width and height of the elastic sub-item will be automatically compressed until it meets the width and height of the container.

2.3.2 flex-wrap attribute

By default, items are aligned on a line (also called a "grid"). flex-wrapAttribute definition, if one axis line cannot be arranged, how to wrap the line.
Flexible items are no longer compressed after wrapping.

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

It may take three values.

• nowrap(Default): No line breaks.
  

• wrap: Line wrap, with the first line at the top.
  

• wrap-reverse: Line break, with the first line at the bottom.
  

2.3.3 flex-flow

flex-flow Property is short for flex-directionproperty and property, with a default value of .flex-wraprow nowrap

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

2.3.4 justify-content attribute

justify-contentProperty defines the alignment of the item on the main axis

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

It may take 5 values, and the specific alignment is related to the direction of the axis. The following assumes that the main axis is from left to right.

• flex-start(default): left aligned
• flex-end: right aligned
• center: Center
• space-between: Align both ends, with equal spacing between items.
• space-around: Each item is equally spaced on both sides. Therefore, the space between items is twice as large as the space between items and the border.
  It can also be understood as dividing the remaining space in a row equally between the left and right margins of the element without overlapping.

2.3.5 align-items attribute

align-itemsProperties define how items are aligned on the cross axis.

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

It may take 5 values. The specific alignment is related to the direction of the cross axis. It is assumed below that the cross axis is from top to bottom.

• flex-start: Align the starting point of the cross axis. If multiple lines appear, the starting point of the line is aligned, not the axis.
• flex-end: Align the end point of the cross axis. If multiple lines appear, the end points of the lines are aligned, not the axis.
• center: Align to the midpoint of the cross axis.
• baseline: Baseline alignment of the first line of text of the item.
• stretch(Default value): If the item does not set a height or is set to auto, it will occupy the entire height of the container.

2.3.6 align-content attribute

align-contentProperties define the alignment of multiple axes. This property has no effect if the project has only one axis.

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

This attribute may take on 6 values.

• flex-start: Aligned with the starting point of the cross axis.
• flex-end: Aligned with the end point of the cross axis.
• center: Aligned with the midpoint of the cross axis.
• space-between: Aligned with both ends of the cross axis, with even spacing between axes.
• space-around: The intervals on both sides of each axis are equal. Therefore, the distance between the axes is twice as large as the distance between the axes and the frame.
• stretch(Default): The axis line occupies the entire cross axis.

2.4 Attributes of child elements (items)

The following 6 properties are set on the project.

• order: element size
• flex-grow: Define the magnification ratio of the item
• flex-shrink: Defines the reduction ratio of the project
• flex-basis: Defines the main axis space occupied by the item before allocating excess space
• flex
• align-self: Allows a single item to have a different alignment than other items

2.4.1 order attribute

orderProperties define the order in which items are sorted. The smaller the value, the higher the ranking. The default is 0.
When all elements are the same, arrange them in code order

.item {
    
    
	order: <integer>;
 }

2.4.2 flex-grow attribute

flex-growThe property defines the enlargement ratio of the item, which defaults to 0not enlarging the item if there is remaining space.

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

  If all items flex-growhave a property of 1, they will equally divide the remaining space (if any). If one item has flex-growa property of 2 and the other items have a property of 1, the former will occupy twice as much remaining space as the other items.
  The multiple of growth is that the expanded size is twice as much as the expanded size of other elements. It can also be understood as the amount of remaining space allocated. For example, div is 500, ab is originally 100, and b is 2 times, then a=200, b=300

2.4.3 flex-shrink attribute

flex-shrinkThe property defines the shrinkage ratio of the item, which defaults to 1, i.e. if there is insufficient space, the item will shrink.

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

  If flex-shrinkthe attributes of all items are 1, when there is insufficient space, they will all be reduced proportionally. If flex-shrinkthe attribute of one item is 0 and the other items are all 1, the former will not shrink when there is insufficient space.
  Negative values ​​are not valid for this property.

2.4.4 flex-basis property

flex-basisThe property defines the main size of the item before allocating excess space. The browser uses this attribute to calculate whether there is extra space on the main axis. Its default value autois the original size of the project.

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

It can be set to the same value as the widthor attribute (e.g. 350px), and the item will occupy a fixed space.height

2.4.5 flex attribute

flexThe attribute is short for flex-grow, flex-shrinkand , and has a default value of . The last two properties are optional.flex-basis0 1 auto

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

flex: 0 1 auto;
flex-grow  当父元素有多余的空间时，默认值：0不放大，1 值越大划分越多
flex-shrink为1空间缩小时缩小，默认值：0不缩小
flex-basis为auto，则该元素的原本大小
isv支付宝小程序

This property has two shortcut values: auto( 1 1 auto) and none ( 0 0 auto).
It is recommended to use this attribute first instead of writing three separate attributes separately, because the browser will infer the relevant values.

2.4.6 align-self attribute

align-selfProperties allow individual items to be aligned differently from other items. align-itemsProperties can be overridden. The default value is auto, which means inheriting align-itemsthe properties of the parent element. If there is no parent element, it is equivalent to stretch.

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

This attribute may take 6 values. Except for auto, the others are exactly the same as the align-items attribute.

---

---

3. grid

girdThe essential difference between layout and flexlayout is that: flex layout is a one-dimensional layout, which can only handle layout in one dimension at a time, that is, rows or columns; while grid layout is a two-dimensional layout, which divides the container into rows and columns to form a cells, and then we can specify the cells occupied by our "project" to form the layout we want.

3.1 Common attributes of gird

display
grid-auto-flow // 排列方式
grid-template-rows // 行高，用法：repeat方法、auto-fill、fr、auto
grid-template-columns // 列宽 ，用法：repeat方法、auto-fill、fr、auto
row-gap // 行之间的间距
column-gap  // 列之间的间距
gap // row-gap 和 column-gap的缩写
justify-items // 水平对齐
align-items // 垂直对齐
place-items // justify-items 和 align-items 属性的简写
justify-content // 整个内容区域在容器内水平方向的对齐方式
align-content // 整个内容区域在容器内垂直方向的对齐方式
place-content // align-content 和 justify-content 的简写
grid-auto-columns // 多余的项目设置列宽
grid-auto-rows // 多余的项目设置行高
grid-template //  缩写
grid // 缩写
grid-template-areas // 与grid-area配合使用

---

3.1.1 grid-auto-flow arrangement method

Define the order in which items are sorted. The values ​​include row (default value), column, row dense, and column dense.

• row denseIndicates that the line should be filled as much as possible without spaces.
• column denseIndicates that a column should be filled as much as possible without spaces.
  

---

3.1.2 grid-template-rows row height, grid-template-columns column width

grid-template-rows: used to define the row height of each row: used to define the column width
grid-template-columns of each column . If you need to define how many rows and columns you need, just write a few values, separated by spaces.

For example: The following defines three rows and three columns, each row is 50px high and each column is 100px wide.

<style>
    .grid-container {
      
      
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 50px 50px 50px;
    }
    .grid-item {
      
      
      background-color: rgba(233, 143, 206, 0.8);
      border: 1px solid black;
      text-align: center;
    }
</style>

<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>
</body>

This attribute has various uses:

• repeatMethod: repeat (number of repetitions, repeated value);
  for example: grid-template-columns: 100px 100px 100px; it can be written as grid-template-columns: repeat(3,100px);
  Multiple repeated values ​​can be written, for example: grid-template-columns: repeat(2,100px 50px 30px); it is equivalent to grid-template-columns: 100px 50px 30px 100px 50px 30px;.
• auto-fillKeyword: Indicates automatic filling, each row/column accommodates fixed-size cells as much as possible.
  For example: grid-template-columns: repeat(auto-fill ,100px); it means that each row should try to accommodate cells with a width of 100px.
• frKeywords: used to define the proportion of each row and column.
  1. grid-template-rows: 1fr 2fr 3fr;Indicates that the height of the second row is twice the height of the first row, and the height of the third row is three times the height of the first row.
  2. Mixed with length unit: grid-template-rows: 1fr 2fr 50px;
  3. Used in combination with repeat method:grid-template-rows: repeat(6,1fr);
• autoKeyword: Indicates that the browser automatically allocates width and height, that is, it automatically fills up the remaining space.
  For example, if you want each row/column to have the same width and height, you can set all to auto, that is, all to be square;grid-template-columns: auto auto auto; grid-template-rows: auto auto auto;

1. Repeat method: grid-template-columns: repeat(2,100px 50px 30px);The effect is as follows:

---

2. auto-fill keyword: grid-template-columns: repeat(auto-fill ,100px);The effect is as follows:

---

3. frKeywords: grid-template-rows: repeat(6,1fr);The effect is as follows

4. autoKeyword: grid-template-columns: auto auto auto;The effect is as follows:

3.1.3 row-gap、column-gap 与 gap

row-gapUsed to define the row spacing between rows. Used to define the column spacing
column-gap between columns. It is the abbreviation of and
gaprow-gapcolumn-gap

gap: row-gap column-gap;When two values ​​are equal, you can write only one.

---

3.1.4 justify-items、align-items 与 place-items

justify-itemsUsed to set the horizontal alignment of the cell's content.
align-itemsUsed to set the vertical alignment of the cell's content.
place-items It is the abbreviation of the justify-itemsand align-itemsproperties. place-items: align-items justify-items;If the two values ​​are the same, you can write only one.


justify-itemsThe values ​​​​of and align-itemsare the same, and they have multiple uses:

• start: left aligned
• end: right aligned
• center: centered
• stretch: stretch to fill the entire width of the cell (default value)
  
  

---

3.1.5 justify-content、align-content 与 place-content

justify-contentSet the horizontal alignment of the entire content area within the container . Set the vertical alignment of the entire content area within the container. It is the abbreviation of and . If the two values ​​​​are the same, you can write only one. The values ​​​​of and are the same, and they have multiple uses: start (default value), end, center, space-around, space-between, space-evenly
align-content
place-contentalign-contentjustify-content


justify-contentalign-content

---

3.1.6 grid-auto-columns, grid-auto-rows attributes

grid-auto-columnsSet column width for extra items Set row height
grid-auto-rows for extra items

Below we only set up two rows and two columns, but we have 6 items, so there will be 2 more items.

<style>
    .grid-container {
      
      
      display: grid;
      width: 400px;
      height: 400px;
      grid-template-columns: 100px 100px;
      grid-template-rows: 100px 100px;
      background-color: #ccc;
    }
    .grid-item {
      
      
      font-size: 25px;
      background-color: rgba(233, 143, 206, 0.8);
      border: 1px solid black;
      text-align: center;
    }
</style>

<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
  </div>
</body>

---

3.1.7 grid-template-areas

Define the grid area , generally used in conjunction with the project attribute grid-areas, which will be discussed later.
The following defines a container with 3 rows and 3 columns:

---

3.1.8 grid-template, grid properties

grid-templateThe properties are abbreviations for grid-template-columns, grid-template-rowsand grid-template-areas.
gridAttribute is the abbreviation of grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns.grid-auto-flow

---

---

3.2 Sub-element (item) attributes

grid-column-start //子元素列开始的网格线
grid-column-end //子元素列结束的网格线
grid-row-start //子元素行开始的网格线
grid-row-end //子元素行开始的网格线
grid-column // grid-column-start 与 grid-column-end 的简写
grid-row // grid-row-start 与 grid-row-end 的简写
justify-self // 子元素内容的水平位置
align-self // 子元素内容的垂直位置
place-self // justify-self 与 align-self 的简写
grid-area // 网格布局

---

3.2.1 grid-column-start、grid-column-end 和 grid-row-start、grid-row-end

Specifies the starting grid line and ending grid line of the item .

<style>
    .grid-container {
      
      
      display: grid;
      width: 400px;
      height: 400px;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
      background-color: #ccc;
    }
    .grid-item {
      
      
      font-size: 25px;
      background-color: rgba(233, 143, 206, 0.8);
      border: 1px solid black;
      text-align: center;
    }
    .item1{
      
      
      background-color: rgb(48, 201, 137);
      grid-column-start: 1;
      grid-column-end: 3;
    }
</style>

<body>
  <div class="grid-container">
    <div class="grid-item item1">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
  </div>
</body>

spanKeyword: Indicates how many grids to span.

In the above example, you can grid-column-start: 1; grid-column-end: 3;
replace with: grid-column-start: span 2;and the effect will be the same.

---

3.2.3 grid-column、grid-row

grid-columnAttribute is the abbreviation of grid-column-startand grid-column-end,
grid-rowattribute is the abbreviation of grid-row-startand grid-row-end.

grid-column: 1/3;Equivalent grid-column-start: 1; grid-column-end: 3;
grid-column: 1/3;to can also be written grid-column: 1/span 2; , meaning starting from the first vertical line and spanning two cells.

---

3.2.4 justify-self、align-self 与 place-self

justify-self、align-selfUsed to set the horizontal and vertical position of the cell content for a single item . The usage is the same as the justify-itemsand align-itemsproperties.

---

3.2.4 grid-area

Used to specify which area the project is placed in. As mentioned earlier, it is generally grid-template-areasused in conjunction with attributes.

<style>
    .item1 {
      
      
      grid-area: header;
      background-color: rgb(237, 148, 170);
    }
    .item2 {
      
      
      grid-area: menu;
      background-color: rgb(186, 215, 133);
    }
    .item3 {
      
      
      grid-area: main;
      background-color: rgb(109, 109, 228);
    }
    .item4 {
      
      
      grid-area: right;
      background-color: rgb(229, 105, 194);
    }
    .item5 {
      
      
      grid-area: footer;
      background-color: rgb(63, 207, 233);
    }
    .grid-container {
      
      
      display: grid;
      grid-template-areas:
        'header header header header header header'
        'menu main main main main right'
        'menu footer footer footer footer footer';
      grid-gap: 10px;
      background-color: #eff3f6;
      padding: 10px;
    }
    .grid-container>div {
      
      
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
    }
</style>

<body>
  <div class="grid-container">
    <div class="item1">Header</div>
    <div class="item2">Menu</div>
    <div class="item3">Main</div>
    <div class="item4">Right</div>
    <div class="item5">Footer</div>
  </div>
</body>

In addition, the grid-area attribute can also be used as a shorthand for grid-row-start, grid-column-start, grid-row-end.grid-column-end

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;

---

For grid content, refer to https://blog.csdn.net/lq313131/article/details/126190546