The grid layout

1. Grid is a grid layout that automatically separates elements

2. The properties of grid are

One: Set the grid layout

display:grid / inline-grid;
Copy the code
To divide a line:
Grid-template-rows = 100px 100px 100px 100px 100px; grid-template-rows = 100px; grid-template-columns: 100px 100px 100px 100px; This property means: 2. Auto-fill means that each row and column of the element occupies as much of the cell as possible. It will be automatically filled until the entire div is filled. Grid-template-columns :repeat(auto-fill,100px); Grid-template-columns :1fr 1fr; grid-template-columns: 1FR 1FR; Grid-template-rows :130px 1fr 2fr Grid-template-rows :130px 1fr 2fr Grid-template-rows :130px 1fr 2fr Grid-template-rows :130px 1fr 2fr Grid-template-rows :130px 1fr 2fr Grid-template-rows :130px 1fr 2fr Grid-template-rows :130px 1fr 2fr Grid-template-rows :130px 1fr 2fr Grid-template-rows :130px 1fr 2fr Grid-template-rows :130px 1fr 2fr It takes two parameters, a minimum and a maximum. In the code above, minmax(100px, 1fr) means that the column width is not less than 100px, but not more than 1fr. The length of the auto keyword is determined by the browser. For example, grid-template-columns: 100px auto 100px. The width of the second column is essentially equal to the maximum cell width of that column, unless the cell content is set to min-width and this value is greater than the maximum width. Grid-template-columns and grid-template-rows can also use square brackets to specify the name of each grid line for future reference. For example, grid-template-columns: [c1] 100px [c2] 100px [c3] auto [C4]; grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4]; Note: In a grid layout, a line can have multiple names such as: [fifth line row-5] [fifth line row-5] [fifth line row-5] [fifth line row-5] [fifth line row-5] [fifth line row-5] [fifth line row-5] [fifth line row-5] [fifth line row-5] [fifth line row-5] [fifth line row-5] [fifth line row-5] Grid-template-columns: repeat(12, 1fr); grid-template-columns: repeat(12, 1fr);Copy the code

3, Grid set row spacing

Grid-row-gap grid-column-gap grid-gap is the abbreviation of the preceding column and column. If the second value is omitted, the default value is the first value. The first parameter is row, followed by column attribute valuesCopy the code

4. Specify a specified area of the cell

Grid-template-columns: 100px 100px 100px; grid-template-columns: 100px; grid-template-columns: 100px; grid-template-rows: 100px 100px 100px; grid-template-areas: 'a b c' 'd e f' 'g h i'; Grid template-columns: 100px 100px 100px; grid template-columns: 100px; grid template-columns: 100px; grid-template-rows: 100px 100px 100px; grid-template-areas: 'a . c' 'd . f' 'g . i'; The code above means discarding the cells that are not needed. The. Represents the cells that are not needed. Instead of)Copy the code

5. Discharge order of cells (first before column or first after column)

Grid-auto-flow determines the emission order of child elements
grid-auto-flow: column; /* grid-auto-flow: row; /* grid-auto-flow: column dense; /* grid-auto-flow: row dense; /* relist first and fill */ as much as possibleCopy the code

6. The position of the cell is discharged

The position of a cell has three properties: justify-items, which sets the horizontal position of the cell, align-items, which sets the vertical position of the cell. Start, which aligns the beginning edge of the cell. End, which aligns the end edge of the cell. Inside the cell center stretch: stretch, filled the entire width of the cell (the default) the justify - items: start | | end center | stretch; align-items: start | end | center | stretch; place-items: <align-items> <justify-items>;Copy the code

7. Location of the content area in the container

Context-content: sets the horizontal position of the entire content in the container align-content sets the vertical position of the entire content area in the container palce-content is short for space-around Space between projects evenly spaced, and container evenly spaced with the project border: start | end | center | stretch | space-around | space-between | space-evenly; align-content: start | end | center | stretch | space-around | space-between | space-evenly; place-items: <align-content> <justify-content>;Copy the code

Two: project attributes

1. Specify project location

Grid-column-start property: vertical grid line where the left border is grid-column-end property: vertical grid line where the right border is grid-row-start property: horizontal grid line where the top border is Grid-row-end property: Item-1 {grid-column-start: 2; {grid-column-start: 2; grid-column-end: 4; {grid-column-start: span 2;} 2):span 2; grid-column-end: span 2; / * both effect * /} 3) : the grid - is the column grid - column - start the abbreviation of the grid and the grid - column - end - row is the grid - row - the start and the abbreviation of the grid - row - end Method of use is as follows. Item { grid-column: <start-line> / <end-line>; grid-row: <start-line> / <end-line>; }Copy the code

2. Specify the project placement area

Grid-area indicates the area in which the project is located
Example: item-1:{grid-area: e; Grid-area = grid-row-start; grid-column-start; grid-row-end; grid-column-end;  .item { grid-area: <row-start> / <column-start> / <row-end> / <column-end>; }Copy the code

3. Specify the location of the cell

Identical to the cell location of the container property above, But this only sets the horizontal position of a single cell for a single item attribute; align-self sets the vertical position of a single cell; place-self start | end | center | stretch; align-self: start | end | center | stretch; place-self: <align-self> <justify-self>;Copy the code

Flex layout

Basically, Flex projects are aligned along either the main axis (main-start to main-end) or the side axis (cross-start to cross-end).

  • Main Axis: The main axis of the Flex container is used to configure the Flex project. Note that it doesn’t have to be level, it dependsflex-directionProperties.
  • The main – start | main – end: Flex project configuration from the beginning of the spindle start side of the container, the spindle end end side.
  • Main size: The width or height of a Flex project in the main axis direction is the main axis length of the project. The main length attribute of a Flex project is either width or height, depending on which direction is facing the main axis.
  • Cross axis: The axis perpendicular to the main axis is called the side axis and is an extension of the side axis.
  • Cross – start | cross – end: telescopic line configuration from a container to begin side to side shaft, shaft end side to side to an end.
  • Cross size: The width or height of the Flex project in the side axis is the length of the Flex project side axiswidth 或 heightProperty, depending on which one is facing the side axis.

Container attribute

display

This property is defined on the elastic container; Determines whether the layout is inline or block based on its value. Its immediate child will then become the Flex document flow.


.container {

  display: flex; /* or inline-flex */

}
Copy the code

Flex containers are not block containers, so some genera designed to control block layout do not apply in Flexbox layout. In particular: all column-* attributes, float, clear, and vertical-align attributes in a multi-column group have no effect on the Flex container.

If the value of the element display is specified as inline-flex and the element is a floating or absolutely positioned element, the computed value of display is flex.

flex-direction

This is built on the main axis, which defines the direction in which Flex projects are placed in the Flex container. FlexBox is a single directional layout concept. You can think of elastic items as being primarily arranged in horizontal rows or vertical columns.


.container {

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

}
Copy the code
  • row(Default): if written asltr, so Flex items are arranged from left to right; If you write it like thisrtl, so Flex items are arranged from right to left
  • row-reverse: If the writing isltr, so Flex items are arranged from right to left; If you write it like thisrtl, so Flex items are arranged from left to right
  • column: Is similar to row except that it is arranged from top to bottom
  • column-reverse: Is similar to row-reverse, except that the orientation is arranged from bottom up

flex-wrap

By default, all elastic items are grouped on one line. You can use this property to change this and have them wrap according to your needs. Document orientation also plays a role here, determining the direction in which the new line is stacked.

  • nowrap(Default) : single line display. inltrTypesetting, items from left to right; inrtlDown, from right to left
  • wrap: Multi-line display. inltrTypesetting, items from left to right; Under RTL, from right to left
  • wrap-reverse: Multi-line display. withwrapOn the contrary

flex-flow

It is short for flex-direction and flex-wrap. It defines both the principal axis and the side axis of the elastic vessel. The default is Row Nowrap.


.container {

  flex-flow: column wrap;

}
Copy the code

justify-content

This property is used to define alignment on the main axis. When all the elastic items are in a row and cannot stretch elastically, or can stretch but reach maximum size, it can help allocate the remaining excess space. And this property can also exert some control over project alignment when they overflow.


.container {

  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;

}
Copy the code
  • flex-start(Default) : Children are placed from the beginning of a line
  • flex-end: Children are placed from the end of a line
  • center: Subitems are centered in the middle of a row
  • space-between: subitems are evenly distributed in rows; The first item is placed at the beginning of a line, and the tail item is placed at the end of a line
  • space-around: The children are evenly distributed in a row with the same distance. Note that it doesn’t look equally spaced visually, because all the children need equal space on both sides. The first term will be one unit space away from the beginning edge of the container, but it will be two units space away from the next term, because the next term will have its own fit.

Note that only some of the attributes are listed here, because browser support varies. For example, space-between is not supported on some versions of Edge and There is no support for start/end/left/ Right in Chrome. MDN has detailed charts. The safest values are flex-start, flex-end, and center.

align-items

This is used to define the default behavior of elastic items on the current front axis of the elastic container. Think of it as the side-axis version of justity-content.


.container {

  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;

}
Copy the code
  • flex-start: The margin of the elastic term on the starting edge of the side axis is close to the starting edge of the line on the side axis.
  • flex-end: The margin of the elastic term at the starting edge of the side axis is close to the edge at the end of the side axis.
  • centerThe elastic element will be placed in the center of the side axis.
  • baselineElastic items are aligned according to their baseline.
  • Stretch (default) : Stretches the elastic item on the side axis to fill the elastic container. (min-width/max-width)

align-content

This property aligns the container’s rows according to the extra space on the side axis, similar to how precy-content aligns a single elastic item on the main axis.

Note that this property has no effect on elastic items with a single line.

  • flex-start: The guild is immediately adjacent to the starting bit of the container
  • flex-endThe: line is immediately adjacent to the end bit of the container
  • center: row is immediately in the middle of the container
  • space-between: Each line will be evenly distributed; The first row is at the beginning of the container and the last row is at the end of the container
  • space-around: Each row is evenly distributed according to the same distance
  • stretch: Each row will stretch to take up the remaining space.

Flex Items

order

By default, the elastic project document flows in sequence. However, you can use the Order attribute to control the order in which it appears in the Flex container.


.item {

  order: 5; /* default is 0 */

}
Copy the code

flex-grow

It defines the Flex project’s ability to grow when necessary. It accepts a value without units as a scale. This value determines how much space an elastic project can take up. If all items are set to 1, the remaining space in the container will be evenly distributed among all items. If one of these values is 2, that item takes up twice as much space as the others.


.item {

  flex-grow: 4; /* default 0 */

}
Copy the code

Negative numbers are invalid.

flex-shrink

This defines the ability of a Flex project to shrink when necessary.


.item {

  flex-shrink: 3; /* default 1 */

}
Copy the code

Negative numbers are invalid.

flex-basis

This defines the default size of an element before it is allocated to the remaining space. It can be a length (e.g. 20%, 5REM, etc.) or a keyword. The auto keyword means “resize to my width and height attributes” (it will temporarily resize to main-size until deprecated). If you use the keyword content, it means “resizing based on content” — but this keyword doesn’t necessarily work well, so it’s hard to test or know what its Cousins max-content, min-content, and Fit-content do.


.item {

  flex-basis: <length> | auto; /* default auto */

}
Copy the code

If set to 0, the extra space content is not decomposed. If set to Auto, the extra space is distributed based on its flex-grow value.

felx

This is short for a combination of flex-grow, flex-shrink, and Flex-basis. The second and third arguments (flex-shrink and flex-basis) are optional. The default is 0 1 auto, but if you set it to a single value, it is similar to 1 0.


.item {

  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

}
Copy the code

It is recommended that you use the abbreviated attribute, which is better than setting a separate attribute. You can intelligently set values using abbreviations.

align-self

This property can override the alignment of a single align-items setting, or specify the alignment of a single item.

See the align-items description for available values.


.item {

  align-self: auto | flex-start | flex-end | center | baseline | stretch;

}
Copy the code