Summary of Flex and Grid layout, Flex summary more comprehensive refer to the following website:www.ruanyifeng.com/blog/2015/0… www.ruanyifeng.com/blog/2019/0… Flex layout: Used to provide maximum flexibility for the box model (any container can be specified as a Flex layout, which invalidates the float, clear, and vertical-align attributes of the child elements)

Flex layout contains Flex Container + Flex ItemHorizontal axis: Items are arranged along the main axis by default

Vertical cross axis: cross axis

  1. Flex Container Properties (6)

    • Flex-direction: Determines the main axis, that is, the alignment of items
    • Flex-wrap: How to wrap an axis if it does not fit (by default, items are placed on one line)
    • Flex-flow: flex-direction + flex-wrap
    • Illustration-content: Defines the alignment of items on the main axis
    • Align-items: Defines the alignment of items on the cross axis
    • Align-content: defines the alignment of multiple axes. This property has no effect if the project has only one axis

  2. Flex Item Attributes (6)

    • Order: defines the order of items. The smaller the value, the higher the order. The default value is 0

    • Flex-grow: Defines the project scale. Default is 0 (no scale if there is free space)

    • Flex-shrink: Defines the size of the project. Default is 1 (if the project is shrunk due to insufficient space). Negative values do not apply to this property

    • Flex-basis: defines the main axis the project occupies before allocating extra space, default auto (the original size of the project)

    • Flex: flex-grow + flex-shrink + flex-basis. The default value is 0. 1 Auto.

    • Align-self: allows a single item to be aligned differently from other items. Align-items can be overwritten. Default is auto (inheriting the align-items attribute of the parent element, and if there is no parent element, it is the same as stretch

Grid layout: Grid layout, the page is divided into a Grid, can be arbitrarily different Grid composed of containers and items, container default block level elements, can also be set to inline elements by inline-grid; Project can only be at the top of the container child elements, does not contain the project child elements (set to grid layout, of float of the child elements in a container, display: inline – block | table cell, vertical align and the column – * set will be invalidation etc.)

A Grid layout only works for items. Horizontal areas are called rows, vertical areas are called columns, and areas where rows and columns cross are called cells

Similarities and differences between Flex and Grid layouts: A Grid layout is similar to a Flex layout in that it can specify the location of multiple items within a container. Flex layout is an axis layout and can only specify the position of “items” against the axis, which can be considered as a one-dimensional layout. A Grid layout divides the container into “rows” and “columns”, generates cells, and then specifies the cells “where the project resides”, which can be thought of as a two-dimensional layout. The Grid layout is far more powerful than the Flex layout