Flex layout

flexible box - any element can be specified as a flex layout

flex layout: parent element - flex container, child element - item

**Principle: * * when adding the flex attribute to the parent box, you can control the position and arrangement of the child box

**Note: * * when the parent box is set to flex layout, the float, clear and vertical align attributes of the child elements are invalid

Container properties

1. Specify as flex layout

display: flex;
/* After the parent element is specified as flex layout, the width and height of the child element can be set */

2. Set the spindle direction

flex-direction: row / row-reverse / column / column-reverse;

3. Set the arrangement of sub elements on the spindle

justify-content: flex-start;Default value

flex-start / flex-end / center
space-around Divide the remaining space equally
space-between First edge both sides, and then divide the remaining space equally

4. Set line feed

flex-warp: nowrap / wrap;

/* Compound writing */
flex-flow: column wrap;Set the spindle direction to allow line breaks

5. Set the arrangement mode of sub elements on the side axis (single line)

align-items: center / flex-start / flex-end / stretch Stretch when the sub box is not given height;

6. Set the arrangement mode of sub elements on the side axis (multiple rows)

align-content: flex-start;Default value

flex-start / flex-end / center / stretch
space-around Divide the remaining space equally
space-between First edge both sides, and then divide the remaining space equally

Project properties

1. Share of flex subproject

flex: number;
flex: 1;

2. Control the arrangement of subprojects on the side axis

align-self: auto;default
center / flex-start / flex-end / stretch

3. order defines the order of items

/* The smaller the value, the higher the arrangement. The default value is 0. Negative values can be used */
order: 1;

flex-shrink: 0; Do not compress (overflow may be caused, and overflow concealment shall be added)

Flex grow specifies how much the project will expand to other flexible projects

Length of flex basis project

Grid layout

Grid layout: parent element - container, child element - Project

Container properties

1. Specify as grid layout

display: grid;
display: inline-grid;
/* Can be converted to block elements or inline elements */

After the container triggers the grid layout, the child elements are converted to block elements, and the child elements are stretched

2. Dividing rows and columns

grid-template-rows: value;
grid-template-columns: value;

Value Description:

1. Take multiple specific values, separated by spaces,

How many values represent how many rows / columns, and the value content represents the specific length

grid-template-rows: 100px 200px 200px 100px;
grid-template-columns: 100px 200px 200px 100px;

2. It can be expressed as a percentage

/* Indicates that it is divided into 5 rows, and the height is the specified percentage of the parent label */
grid-template-rows: 10% 20% 30% 20% 20%;

3. If the divided rows or columns have the same width or height, they can be used

repeat (number of rows / columns, percentage / specific value)

grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);

/* Percentage and specific pixel values can be mixed */
grid-template-columns: 50px repeat(3, 20%) 70px;

4. You can automatically divide rows and columns and allocate width and height according to the width and height of the specified cell

/* auto-fill Auto fill, each accounting for 20% of the parent element */
grid-template-rows: repeat(auto-fill, 20%);
grid-template-columns: repeat(auto-fill, 30%);

5. Scores can also be used to describe

/* The containers are divided into 5 parts and 3 columns, with each column accounting for 1 / 5, 3 / 5 and 1 / 5 respectively */
grid-template-rows: 1fr 3fr 1fr;

/* One fifth and two fifths of the containers will be listed respectively */
grid-template-columns: 1fr 2fr 2fr;

6. You can also set the maximum and minimum values of rows or columns

grid-template-columns: minmax(minimum value, Maximum);

/* Represents the last line, with a minimum of 100px and a maximum of 150px */
grid-template-rows:100px 150px minmax(100px, 150px);

/* Indicates the last column, with a minimum of 50px and a maximum of 150px*/
grid-template-columns: 80px 50px minmax(50px, 150px); 

7. Set auto to replace the specific value, which means auto filling and occupying the remaining distance

/* Indicates that the first column is 30px and the third column is 20px. All remaining distances belong to the second column */
grid-template-columns:30px auto 20px;

3. Set row spacing and column spacing

grid-row-gap: 20px;
grid-column-gap: 20px;

/* Compound writing */
grid-gap: ranks;

4. Set the arrangement order of cells

grid-auto-flow: row(Default landscape) / column(Longitudinal arrangement);

5. Alignment of contents in cells

justify-items: start Align left / end Right align / center / stretch;
/* Stretch stretch does not take effect if width or height is set for the content */

align-items: start Align left / end Right align / center / stretch;

/* Compound writing */
place-items: Vertical alignment horizontal alignment;

6. Set the alignment of the grid in the container

Horizontal alignment:
justify-content: start/ end / center / stretch / space-around / space-between / space-evenly The column spacing of the grid is the same as that of the container;

Vertical alignment
align-content: start/ end / center / stretch / space-around / space-between / space-evenly The column spacing of the grid is the same as that of the container;

7. Specify grid line name

/* Specify names when dividing rows and columns */
grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4];

8. Specify cell name

grid-template-areas: 
   'a b c'
   'd e f'
   'h i j'
;

/* For useless cells, it is recommended not to give names, but to use replace */
grid-template-areas: 
   '. . .'
   '. e .'
   '. . .'
;

/* The name can be repeated. Adjacent cells with the same name will be merged */
grid-template-areas: 
   'a a c'
   'd e f'
   'h i j'
;

Project properties

1. Merge cells

Specify gridlines to merge cells

/* Merge row */
grid-row-start: r1;
grid-row-enf: r3;

/* Merge column */
grid-column-start: c2;
grid-column-end: c4;

/* Use / to separate the start line name / end line name in the middle of compound writing */
grid-row: r1 / r3;
grid-column: c2 / c4;

2. Place the specified item in the specified cell

1.Name all cells - Belong to container properties
2.The specified item is placed in the specified cell

Write the cell name at the specified location in the item to be specified:
grid-area: e;