🏠 Properties

🚄 Elastic layout [Flex]

.container {
  display: flex;
  /* display: -webkt-flex */
}
Copy the code

Container attribute

  • flex-direction: row | column

    Flex-direction: Row indicates that the axis is horizontal, the vertical axis is crossed, and the items are aligned horizontally

  • flex-wrap: nowrap | wrap | wrap-reverse

    Determines whether to allow line breaks. By default, flex-wrap: nowrap does not allow line breaks and automatically resizes when space is insufficient

  • flex-flow: [flex-direction] [flex-wrap]

    Merge flex-direction and flex-wrap, for example: flex-flow: row wrap

  • align-content: stretch | flex-start | flex-end | center | space-between | space-arroud

    Determines the alignment of the elastic layout on the cross axis. The default is align-content: stretch fills the area, flex-wrap: nowrap invalidates this property

    1. space-between

      If the spacing on both sides is 0 and other items are equally spaced, the effect is as follows:

    2. space-arroud

      The interval between items is equal, and the interval between the two sides is half of the interval between items. The effect is as follows:

  • align-item: stretch | flex-start | flex-end | center

    Determines the alignment of the elastic layout item on the cross axis. The default is: align-content: stretch fills the area

    Align-content and align-item effects differ as follows:

    The align – the content:

    align-item:

  • justify-content: stretch | start | end | center | space-between | space-arroud | space-evenly

    Determines the alignment of the elastic layout in the main axis. The default is justify-content: stretch fills the area. Flex-wrap: nowrap invalidates this property

    The space-instituted item (including margins) will be evenly spaced as follows:

    The other properties have the same effect as align-content except that they are aligned in the main axis instead of crossing the axis

  • justify-item: stretch | flex-start | flex-end | center

    It has the same effect as align-item except that it is aligned in the main axis instead of crossing the axis

Item properties

  • flex-basic: [value]

    Determine the size of the main axis. If not, use width (row)/height (column)

  • flex-grow: [value]

    If the container has remaining space, it belongs to determining the proportion of the remaining space of the container. For example:

    Item-1 {flex-grow: 1}. Item-2 {flex-grow: 1} then the remaining space of the container is divided equally between item-1 and item-2

  • flex-shrink: [value]

    If the container does not contain all items and there is overflow space, the scale of each item shall be determined to no overflow. For example:

    Item-1 {flex-shrink: 1}. Item-2 {flex-shrink: 1} will scale item-1 and item-2 by the same size to fit the container

  • align-self: stretch | flex-start | flex-end | center

    Specifies the alignment of the item along the cross axis, overwriting the align-item

  • justify-self: stretch | flex-start | flex-end | center

    Specifies the alignment of this item in the main axis, overriding precision-item

🕷️ grid layout

.container {
  display: grid;
}
Copy the code

Container attribute

  • grid-template-colum: [value] …

    Determine the number of grid columns and the width of each column, such as grid-template-column: 100px 200px 100px; Defines three columns 100px, 200px, and 100px wide

  • grid-template-row: [value] …

    Determines the number of grid rows and the height of each row

  • fr

    The width/height ratio of each column/row, such as grid-template-Colum: 1fr 2fr, defines a grid with two columns, the second column twice as wide as the first

  • repeat

    Repeat define grid rows/columns, e.g. Grid-template-column: 100px repeat(2, 1fr); Define a grid with three columns. The first column is 100px wide and the remaining space is divided equally between the second and third columns.

    1. auto-fill

      When the container width is uncertain and the column/row width/height is determined, use auto-fill to make each row/column contain as many grids as possible: grid-template-column: 100px repeat(auto-fill, 1fr);

    2. minmax([value], [value])

      Indicates the width/height value range. You can use this property to implement width/height adaptation.

      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); Each grid should be at least 100px, and the maximum evenly divided container space is as follows:

      Grid-template-columns: repeat(auto-fill, 100px) if minmax is not used directly grid-template-columns: repeat(auto-fill, 100px); When the container is of a certain width, there may be a problem that the space is not enough to hold an item and a newline leads to blank space:

  • auto

    Is a keyword that is identical to maximal content if it’s a maximum. As a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.

    grid-template-rows: auto auto auto; The effect is as follows:

  • The grid – row – gap: (value); The grid – column – gap: (value); grid-gap:[grid-row-gap] [grid-column-gap]

    The spacing between rows/columns

  • grid-auto-row: [value]; grid-auto-column: [value]

    Grid-auto-row/grid-auto-column defines the width/height of the extended table if an item is added to the third row of a one-row container

    Grid-auto-rows: 50px Grid-auto-rows: 50px Grid-auto-rows: 50px Grid-auto-rows: 50px Grid-auto-rows: 50px Grid-auto-rows: 50px Grid-auto-rows: 50px Grid-auto-rows: 50px

  • grid-auto-flow: row | column | row dense | column dense

    Row/column determines whether the item is loaded in the grid as a row or as a column. Row dense/Column dense changes the order to fill the empty area, Grid-auto-flow: ROW versus grid-Auto-flow: Row dense:

  • grid-template-areas

    Determine the location of the area, e.g. :

    The grid - the template - areas:a  .  bD, c.Copy the code

    Indicates that regions A, B, C, and D are defined.. Indicates that regions are not allocated. After regions are defined, the default start grid line and end grid line for each region are region name -start and region name -end

  • justify-content / align-content: start | end | center | stretch | space-around | space-between | space-evenly;

    Context-content is horizontal and align-content is vertical, as shown in Flex

  • Place – the content: [align – the content] [the justify – the content]

  • justify-self / align-self: start | end | center | stretch;

    Refer to Flex for details

Item properties

  • grid-colum-start / grid-column-end: [value] [value]

    To determine which grid item resides on, value can be either a number representing the number of grid lines or the name of the grid line, as in the following setting Item1 to the second grid in the first row:

    .item1 {
  grid-colum-start: 2;
  grid-colum-start: 3;
}
Copy the code

  • grid-column / grid-row: [grid-colum-start] [grid-colum-end] / [grid-row-start] [grid-row-end]

  • Grid-area: [grid-area]

    In combination with the region names determined by grid-template-areas, you can place item in the specified region. The following code specifies that item is in region B:

    .containner{the grid - the template - areas:a  .  b, c d.}.item {
  grid-area: b;
}
Copy the code

Reference article:

A Complete Guide to Grid

To be continued