CSS3 commonly used two layouts and their differences

Preface: Not long ago, all HTML pages were laid out using tables, floats, and other CSS properties. Faced with complex page layouts, there is no good way. Flexbox, however, makes it easy to solve complex Web layouts. Now, there’s a new contender to build the best HTML layout architecture. It is the powerful CSS Grid layout.

What’s the difference between Grid and Flex? What scenarios are applicable?

  1. Flexbox is a one-dimensional layout system suitable for local layouts, such as navigation bar components.
  2. Grid is a two-dimensional layout system that is typically used to plan entire pages.
  3. The two do not conflict in terms of application scenarios. While Flexbox can also be used for large page layouts, it’s not as powerful or flexible as Grid. The combination is easier.

What are Flex and Grid layouts? What are the properties?

About Flex Layout

Flexbox is a one-dimensional layout because a Flexbox can only handle the layout of elements in one dimension at a time, one row or one column.

Features:

The Flexbox Flexible Box module is designed to provide the layout of items in a container (based on one dimension), even if their size is unknown or dynamic.

Disadvantages:

Browsers are not compatible with Internet Explorer 9 or later.

Concept:

Flexbox’s two axes: When using flex layout, two axes come to mind first — the main axis and the cross axis. The main axis is defined by flex-direction and the other axis is perpendicular to it. All of the attributes we use for Flexbox are related to these two axes, so it’s important to understand it first.

  • Divide according to function objective
Act on the parent container Student: Acting on the subterm
flex-direction flex-grow
flex-wrap flex-shrink
flex-flow flex-basis
justify-content flex
align-items align-self
align-content order
  • Flex container

The flexbox area is called the Flex container. To create a Flex container, change the display property value of a container to flex or inline-flex. Once this is done, the immediate child elements in the container will become Flex elements. Child CSS properties have an initial value. The default values for the following properties are set as follows:

flex-direction: row; // The default is horizontal, left to rightflex-basis: auto; // The default length depends on the contentflex-wrap: nowrap; // No line breaks by defaultCopy the code

Parent element attribute

  1. display:flex
    • Set up the Flex container:
display: flex | inline - flex / / flex objects as the elastic telescopic box shows / / the inline - flex as inline block-level elastic telescopic box shows the objectCopy the code
  1. flex-direction
    • The spindle direction is defined by flex-direction and can take 4 values:
flex-direction: row | row - reverse | column | column - reverse / / row horizontal array, from left to right (default) / / row - reverse horizontal array, from right to left, contrary to the row/column vertical alignment, Top to bottom // column-reverse vertically, bottom to topCopy the code

As shown in figure:

  • Cross shaft

The cross axis is perpendicular to the main axis, and if your flex-direction is set to row or row-reverse, the cross axis is oriented down the column. If the main axis is set to column or column-reverse, the cross axis is horizontal.

  1. flex-wrap
    • Whether to wrap a line is set by flex-wrap and can take three values:
flex-wrap: nowrap | wrap | wrap - reverse / / nowrap flex elements were put into a line, which may lead to overflow the flex container. (Default) // The wrap Flex element is broken into multiple lines. // wrap-reverse behaves the same as wrap, but cross-start and cross-end are interchanged.Copy the code
  1. flex-flow
    • Flex-flow is a shorthand attribute for flex-direction and flex-wrap. The first value specified is flex-direction and the second value specified is flex-wrap.
flex-flow: row wrap;
Copy the code
  1. align-items
    • The align-items property aligns elements along the cross axis.
align-items: stretch | center | flex - start | flex - end stretch / / elastic elements are in the lateral axis stretch to the same height and width as the container flex - start / / element to the starting point to the side of the shaft alignment. Flex-end // The element is aligned to the end of the lateral axis. Center // The element is centered on the side axis. If the element is higher on the side axis than its container, it spills the same distance in both directions.Copy the code
  1. align-content
    • The align-content property sets how the browser allocates space between and around content items along the vertical axis of the elastic box layout and the main axis of the grid layout.
    • This property is not valid for the single-row elastic box model. (i.e., with flex-wrap: Nowrap).
    • Align-content and align-items implement the same effect, except that the former applies to multiple flex elements in a Flex container, while the latter applies to both single and multiple flex elements:
align-content: stretch | center | flex - start | flex - end stretch / / elastic elements are in the lateral axis stretch to the same height and width as the container flex - start / / element to the starting point to the side of the shaft alignment. Flex-end // The element is aligned to the end of the lateral axis. Center // The element is centered on the side axis. If the element is higher on the side axis than its container, it spills the same distance in both directions.Copy the code
  1. justify-content
    • The context-content attribute is used to align elements in the main axis
justify-content: stretch | flex - start | | flex - end center | space - around | space - between the start / / since the beginning of a line array. The first element of each line is aligned with the beginning of the line, and all subsequent elements are aligned with the preceding one. Flex-start // Arrange from the beginning of the line flex-end // Arrange from the beginning of the line center // center space-around // Evenly arrange each element space-between // allocate the same space around each element Evenly evenly arrange each element the first element is placed at the starting point, and the end element at the end space-finally // Evenly arrange each element evenly spacedCopy the code

Child element attribute

  1. flex-gow
    • Defines the zoom scale of the project. Default is 0, that is, no zoom if there is free space.
flex-grow: number | 0;
// 0 为0It indicates that the remaining space is not reallocated. (Default value) If // number is a positive integer, excess space is allocated proportionallyCopy the code
  1. flex-shrink
    • Defines the scaling of the project, which defaults to 1, that is, the project will shrink if there is insufficient space
flex-shrink: 1 | 0
// 1Will shrink when space is insufficient //0Do not shrink when space is insufficientCopy the code
  1. flex-basis
    • Before assigning excess space to the above two attributes, calculate whether the project has excess space. The default is Auto, which is the size of the project itself
flex-basis: number | auto; // number A unit of length or percentage that specifies the initial length of a flexible item. //autoThe length is equal to the length of the flexible project. If the item does not specify a length, the length is determined by the content. (Default value)Copy the code
  1. flex
    • Flex properties areflex-grow,flex-shrink,flex-basisThe default is 0,1, auto.
flex:1;
// flex: 0.1.auto(Default value)Copy the code
  1. align-self
    • The align-self attribute is applied to items in the Flex container, allowing individual items to be aligned differently than other items. You can use it when you want to align an item differently.
align-self: stretch | center | flex - start | flex - end stretch / / a single elastic elements are in the lateral axis stretch to the same height and width as the container flex - start / / element to the starting point to the side of the shaft alignment. Flex-end // The element is aligned to the end of the lateral axis. Center // The element is centered on the side axis. If the element is higher on the side axis than its container, it spills the same distance in both directions.Copy the code
  1. order
    • Specifies the order in which scalable items in an elastic container are laid out. The element is laid out in incremented order of the value of the order attribute. The smaller the value, the more forward you sort.
order: 5 | -1; // Positive or negativeCopy the code

About Grid Layout

Grid is the most powerful CSS layout scheme. Grid Is the division of web pages into grids, which can be arbitrarily combined to make a variety of layouts. A grid is a set of intersecting horizontal and vertical lines that define the columns and rows of the grid. We can place grid elements at locations associated with these rows and columns.

Features:

  1. Fixed and flexible track dimensions;
  2. You can use line numbers, names, or precise locations to place items on the grid by locating grid areas;
  3. Multiple items can be placed into grid cells or regions that can partially overlap each other.

Disadvantages:

Poor compatibility.

Concept:

Areas that use a grid layout are called containers. Inside the container, grid-positioned child elements are called “items”.

<div class="container">
    <div class="item">
        111
    </div>
    <div class="item">
        222
    </div>
</div>
Copy the code

Container attribute

  1. display: grid
    • With grid layout, float, display: inline-block, display: table-cell, vertical-align, and column-* Settings for container child elements (items) are invalidated.
display: grid; // Grid block level element (default) // Inline-grid line-level block elementCopy the code
  1. grid-template-columns
    • Define the column width of each column
grid-template-columns: 100px 100px 100px; // Three values set three columns and the value is100px
Copy the code
  1. grid-template-rows
    • Define the row height of each row
grid-template-rows: 100px 100px 100px; // Three values set three lines and the value is100px
Copy the code
  1. Repeat () & auto-fill keyword & FR keyword & minmax() & auto keyword & name of grid line

If grid-template-columns or grid-template-rows are set to a large number of rows or columns, you can use repeat() to simplify repeating values

// Repeat () takes two arguments, the first being the number of times it is repeated (as in the previous example)3), the second argument is the value to be repeated. grid-template-columns: repeat(3.100px);
grid-template-rows: repeat(3.100px); // Repeat () it is also ok to repeat a pattern. grid-template-columns: repeat(2.100px 20px 80px); // indicates automatic filling until the container can no longer fit,auto- Fill keyword grid-template-columns: repeat(auto-fill, 100px); // The grid layout provides the fr keyword (abbreviated to fraction) for ease of representation of proportion relationships. If the width of the two columns is1Fr and2Fr means that the latter is twice the former. grid-template-columns: 1fr 1fr; // The minmax() function produces a range of lengths, indicating that the length is within that range. It takes two parameters, a minimum and a maximum. grid-template-columns: 1fr 1fr minmax(100px.1fr);

// autoThe keyword indicates that the length is determined by the browser. grid-template-columns: 100px auto 100px;

// grid-template-columnsYou can also specify the name of each grid line using square brackets in the grid-template-rows property and grid-template-rows property for future reference. grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
Copy the code
  1. grid-row-gap
    • Set line to line spacing (line spacing)
grid-row-gap: 20px;
Copy the code
  1. grid-column-gap
    • Set column to column spacing (column spacing)
grid-column-gap: 20px;
Copy the code
  1. grid-gap
    • Grid-gap is a combination of grid-column-gap and grid-row-gap. The syntax is as follows.
Grid-gap: <grid-row-gap> <grid-column-gap>; grid-gap:20px 20px;
Copy the code
  1. grid-template-areas
    • Grid layouts allow you to specify “areas”, an area consisting of one or more cells. The grid-template-Areas attribute is used to define areas.
grid-template-areas: 'a b c'
                     'd e f'
                     'g h i'; // Multiple cells can be combined into a range as follows. grid-template-areas:'a a a'
                     'b b b'
                     'c c c'; / / instance grid - the template - areas:"header header header"
                     "main main sidebar"
                     "footer footer footer";
Copy the code
  1. grid-auto-flow
    • After the grid is divided, the children of the container are automatically placed in each grid, in order. The default placement order is “first column after column”, that is, the first row is filled before the second row is started, as shown in the following figure.
// The order is set by grid-auto- Determined by the flow attribute, the default value is row, which is "first column after column". Or you can set it to column, which is "column first, row after row". grid-auto-flow: column;
Copy the code
  1. justify-items
    • The context-items property sets the horizontal position of the cell’s content (left, center, and right)
justify-items: start | end | center | stretch; // start: align the beginning edge of the cell. // end: aligns the end edge of the cell. // center: the cell is internally centered. // stretch: stretch to cover the entire width of the cell (default)Copy the code
  1. align-items
    • The align-items property sets the vertical position of the cell’s contents (top, middle, bottom)
align-items: start | end | center | stretch; // start: align the beginning edge of the cell. // end: aligns the end edge of the cell. // center: the cell is internally centered. // stretch: stretch to cover the entire width of the cell (default)Copy the code
  1. place-items
    • The place-items property is a combination of the align-items and context-items properties.
place-items: <align-items> <justify-items>;
place-items: start end;
Copy the code
  1. justify-content
    • The precision-content attribute is the horizontal position of the entire content area inside the container (left, middle and right)
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
Copy the code
  1. align-content
    • The align-content property is the vertical position of the entire content area (top, middle, bottom)
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
Copy the code
  1. place-content
    • The place-content attribute is a combination of the align-content and context-content attributes.
place-content: <align-content> <justify-content>
place-content: space-around space-evenly;
Copy the code
  1. grid-auto-columns & grid-auto-rows
    • Used to set the column width and row height of the extra grid automatically created by the browser.
grid-auto-columns: 50px;
grid-auto-rows: 50px;
Copy the code
  1. rid-template
    • The grid-template attribute is a combination of grid-template-columns, grid-template-rows, and grid-template-areas.
rid-template: <grid-template-columns> <grid-template-rows> <grid-template-areas>
Copy the code
  1. grid
    • Grid attributes are grid-template-rows, grid-template-columns, grid-template-columns, and areas. Grid-auto-rows, grid-auto-columns, and grid-auto-flow are combined abbreviations.
grid: <grid-template-rows> <grid-template-columns> <grid-template-areas> <grid-auto-rows> <grid-auto-columns> <grid-auto-flow>
Copy the code

The project properties

  1. grid-column-start
    • The vertical grid line where the left border of the item is located
grid-column-start: 1; // 1Start at the first root for the left borderCopy the code
  1. grid-column-end
    • The vertical grid line where the right border of the item is located
grid-column-end: 2; // 2For the right border from the end in two rootsCopy the code
  1. grid-row-start
    • The horizontal grid line with the border on the item
grid-row-start: 1; // 1Start at the first root for the top borderCopy the code
  1. grid-row-end
    • The horizontal grid line with the border under the item
grid-row-end: 2; // 2For the bottom border from the end in two rootsCopy the code

The above four item attribute values can be either numerical or grid line names

// As shown in the figure above,1Project number starts with the second vertical grid line and ends with the fourth.item1{
    grid-column-start: 2;
    grid-column-end: 4;
    background: red;
}
Copy the code
  1. grid-column
    • Grid-column property is a combination of grid-column-start and grid-column-end
grid-column: <start-line> / <end-line>;
grid-column: 1 / 3;
/* is equivalent to the following code */
grid-column-start: 1;
grid-column-end: 3;
Copy the code
  1. grid-area
    • The grid-area property specifies which area the project is placed in.
grid-area: e; Grid-area: <row-start> / <column-start> / <row-end> / <column-end>; grid-area: <row-start> / <column-end>; // You can also specify the project location directlyCopy the code
  1. justify-self & align-self & place-self
    • justify-selfProperty sets the horizontal position of the cell’s contents (left, middle, and right), andjustify-itemsAttributes are used exactly the same, but only for a single project.
    • align-selfProperty sets the vertical position of the cell’s contents (top, middle, bottom), andalign-itemsAttributes are used exactly the same and apply only to a single item.
    • place-selfAttributes arealign-selfProperties andjustify-selfThe merged short form of a property.
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch; place-self: <align-self> <justify-self>; //start: align the beginning edge of the cell. //end: aligns the end edge of the cell. //center: the cell is internally centered. //stretch: takes up the entire width of the cell (default).Copy the code

Conclusion:

  • A Grid layout is similar to a Flex layout in that it can specify the location of multiple items within a container. But there are also important differences.
  • Grid can do things that Flexbox can’t do, Flexbox can do things that Grid can’t do, they can work together. A Grid Item can be a Flexbox container, and a Flex item can be a Grid container.
  • To sum up, you can choose the layout according to your business scenario.