Master the Grid layout (long warning)

If the other shore bustling fall, who accompany me to see the sunset fleeting years

[toc]

Writing in the front

Your mastery of CSS layout determines how fast you can develop pages in Web development. As Web technology continues to evolve, the number of ways to implement various layouts is endless.

Recently, I put together a series of articles in about half a month using shred time. This series summarizes the various layouts in CSS, their implementation methods and common techniques. This article series will give you a new understanding of CSS layout.

The navigation posts of this series can be entered by me, which can quickly jump to the articles you want to know (recommended favorites)

Summary of the article

Due to the length of this article (please read with care), the following figure covers the main points of this article

The text start

What is the elastic box model

CSS3 adds the Flexible Box model (or FlexBox), a new way to implement layout on HTML pages. Makes the elements behave predictably as the HTML page ADAPTS to different screen sizes and devices.

The elastic box model implements HTML page layout regardless of direction. Unlike block-level layouts, which focus on the vertical, inline layouts focus on the horizontal.

The elastic box model is mainly suitable for components of HTML pages and small-scale layouts, but not for large-scale layouts, otherwise it will affect the performance of HTML pages.

Elastic box model related concepts

CSS3 added the elastic box model is a complete module, involving more style attributes. First of all, the basic understanding of the related concepts of elastic box model is completed.

  • Telescopic container (flex container) : Wraps the parent element of the flex project.
  • Flex items (flex item) : Scales each child element of the container.
  • Axis (axis) : Each elastic box model has two axes.
    • The spindle (main axis) : The axis along which the flex items are arranged is called the main axis.
    • The lateral axis (cross axis) : The axis perpendicular to the main axis is called the lateral axis.
    • Direction (direction) : The main axis of the telescopic container is defined by the starting point and the end point of the main axis, and the side axis is defined by the starting point and the end point of the side axis to describe the direction of the arrangement of the telescopic items.
  • Size (dimension) : The width and height of the flex item according to the main and side axes of the flex container.
    • The one corresponding to the spindle is called the spindle size.
    • Those corresponding to the side axis are called the side axis dimensions.

Define the elastic box model

To set the elastic box model in CSS3, use the display style property to set the value to Flex or inline-flex.

display: fiex; /* The value flex makes the elastic container a block-level element. * /
/ * or * /
display: inline-fiex; /* The value inline-flex makes the elastic container a single inseparable inline element. * /
Copy the code

The above code specifies an element as an elastic box model, which becomes a flex container, and children become flex items.

The elastic box model also has browser compatibility problems. The solutions are as follows:

/* WebKit engine for browsers (Chrome, Safari, Opera) */
display: -webkit-fiex;
/* Trident engine for the browser (IE 10+) */
dispaly: -ms-fiex;
/* Gecko engine browser (Firefox) */
display: -moz-fiex;
/* Presto engine for browser (Opera) */
dispaly: -o-fiex;
Copy the code

The example code is as follows: Define a simple Flex Box

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>Define the elastic box model</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            /* Set the parent element to the elastic box model * this sets all the child elements to the elastic box model * by default, all child elements as flex items are arranged horizontally along the main axis */
            .container {
                display: flex;
            }
        </style>
    </head>

    <body>
        <! -- HTML structure is parent structure -->
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
    </body>
</html>

Copy the code

There are no layouts like float enabled, just the display of.container set to Flex

The execution result is as follows:

By default, all child elements are arranged horizontally along the main axis as scale items

Properties of the flex container

The flex – direction attribute

The CSS Flex-direction attribute specifies how the internal elements are laid out in the Flex container and defines the orientation (positive or negative) of the spindles.

Grammatical structure

flex-direction: row | row-reverse | column | column-reverse;
Copy the code

value

  • Row: By default, the main axis of the Flex container is defined in the same direction as the text. The start and end of the main axis are in the same direction as the content (the start is at the left).

  • Row-reverse: Behaves the same as row, but replaces the starting point and ending point of the spindle (starting point is on the right)

  • Column: The main axis of the Flex container is the same as the block axis. The starting point of the principal axis is the same as the end point of the principal axis and the point before and after the writing mode (the starting point is along the top).

  • 61. column-reverse: Behaves the same as column, but replaces the starting point and ending point of the main axis (the lower edge of the starting point)

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>02 flex - direction attribute</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            body {
                display: flex;
            }
            .container {
                display: flex;
                margin: 20px;
            }
            /* the flex-direction attribute is used to create the main axis direction * for flex container elements * value * row: sets the main axis to be horizontal by default * row-reverse: Opposite to row * column: sets the direction of the spindle to be vertical * column-reverse: opposite to column */
            .row {
                /* The default is horizontal */
                flex-direction: row;
                height: 200px;
            }
            .row-reverse {
                /* Arrange horizontally, reverse */
                flex-direction: row-reverse;
                height: 200px;
            }
            .column {
                /* Vertical arrangement */
                flex-direction: column;
            }
            .column-reverse {
                /* Vertically arranged in reverse */
                flex-direction: column-reverse;
            }
        </style>
    </head>
    <body>
        <div class="container row">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
        <div class="container row-reverse">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
        <div class="container column">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
        <div class="container column-reverse">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
    </body>
</html>

Copy the code

The execution effect is as follows

The justify – content attribute

The CSS consistent-content attribute applies to a flex container element and is used to set the alignment of flex items along the main axis.

Grammatical structure

justify-content: center| flex-start| flex-end| space-between| space-around;
Copy the code

value

  • center: Scale items are aligned to the middle of the first row (center).
  • flex-start: Scale items are aligned to the start of the first row (left aligned).
  • flex-end: Aligns scale items to the end of the first row (right).
  • space-between: Scale items are evenly distributed on a row (aligned at both ends, items are equally spaced apart).
  • space-around: Scale items are evenly distributed in a row (aligned at both ends, with equal spacing on each side of the item).

The sample code

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>The justify - content attribute</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            .container {
                display: flex;
                width: 1080px;
                margin: 100px auto 0;
            }
            .item {
                height: 100px;
                width: 240px;
                line-height: 100px;
            }
            /* center-content: aligns the stretch items along the main axis. * Value -center: aligns the stretch items to the middle of the first line. - flex-start: Aligns the flex items to the start of the first line (left aligned). - flex-end: Aligns the flex items to the end of the first row (right). - space-between: Scale items are evenly distributed on a row (both ends are aligned, and items are equally spaced apart). - space-around: Scale items are evenly distributed on a line (both ends are aligned, with equal spacing on each side of the item). * /
            .center {
                justify-content: center; Centered / * * /
            }
            .start {
                justify-content: flex-start; /* Left align */
            }
            .end {
                justify-content: flex-end; /* Right align */
            }
            .between {
                justify-content: space-between; /* Align both ends so items are equally spaced */
            }
            .around {
                justify-content: space-around; /* Align both ends so that the spacing on both sides of the item is equal */
            }
        </style>
    </head>
    <body>
        <div class="container center">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
        <div class="container start">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
        <div class="container end">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
        <div class="container between">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
        <div class="container around">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
    </body>
</html>

Copy the code

The execution effect is as follows

It is important to note that what is implemented is the alignment of the flex item relative to the flex container, regardless of the page

The align – the items property

The CSS align-items attribute applies to flex container elements and is used to set the alignment of the row of flex items along the side axis.

Grammatical structure

align-items: center | flex-start| flex-end| baseline| stretch;
Copy the code

value

  • center: The flex item is aligned to the middle position of the lateral axis.
  • flex-start: The flex item is aligned to the starting position of the lateral axis.
  • flex-end: The stretch item is aligned to the end position of the lateral axis.
  • baseline: Scale items are aligned according to the baseline of the scale item.
  • stretch: By default, the flex item is stretched to fill the entire flex container.
<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>The align - the items property</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            body {
                display: flex;
            }
            .container {
                display: flex;
                width: 600px;
                height: 500px;
            }
            /* align-items * align-items * align-items * align-items * align-items * align-items * align-items * align-items * align-items * align-items * align-items * align-items * align-items * align-items - flex-start: Aligns the flex items with the starting point of the side axis. - flex-end: Aligns the flex item with the end point of the side axis. - Baseline: The scaling items are aligned based on the baseline of the scaling items. - stretch: The default value. Stretch items stretch to fill the entire stretch container. * /
            .center {
                align-items: center; Centered / * * /
            }
            .start {
                align-items: flex-start; /* Top alignment */
            }
            .end {
                align-items: flex-end; /* Base alignment */
            }
        </style>
    </head>
    <body>
        <div class="container center">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
        <div class="container start">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
        <div class="container end">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
    </body>
</html>

Copy the code

The execution effect is as follows

With the justify-content attribute, you can center both horizontally and vertically

The flex – wrap attributes

The CSS flexing -wrap property applies to a flex container element and sets whether the flex container’s child elements are displayed in a single line or multiple lines.

Grammatical structure

flex-wrap: nowrap| wrap| wrap-reverse
Copy the code

value

  • nowrap: Displays flex items in a single line. This approach can cause the flex container to overflow
  • wrap: Sets the flex item to be displayed in multiple lines, with the first line at the top.
  • wrap-reverseAnd:wrapInstead, the first row is at the bottom.
<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>The flex - wrap attributes</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            body {
                display: flex;
            }
            .container {
                display: flex;
                width: 600px;
                height: 400px;
            }
            .item {
                width: 200px;
            }
            /* The flex-wrap property is used to set whether children of a flex container are displayed in a single line or multiple lines. * Value - nowrap: Sets scaling items to display in a single line. This approach may cause overflow of the flex container - wrap: Set the flex item to be displayed in multiple lines, with the first line at the top. - wrap-reverse: contrary to 'wrap', the first row is at the bottom. * /
            .nowrap {
                flex-wrap: nowrap;
            }
            .wrap {
                flex-wrap: wrap;
            }
            .wrap-reverse {
                flex-wrap: wrap-reverse;
            }
        </style>
    </head>
    <body>
        <div class="container nowrap">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
        </div>
        <div class="container wrap">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
        </div>
        <div class="container wrap-reverse">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
        </div>
    </body>
</html>

Copy the code

The execution effect is as follows

If the width of the flex container is set to be less than the sum of the widths of all the child elements, the child elements do not wrap and do not overflow.

The effect automatically adjusts the width of all child elements according to the width of the flex container

The align – content attribute

The CSS align-content property applies to flex container elements and is used to set the alignment of flex rows. This property changes the effect of the flex-wrap property.

This property is not valid for a single line elastic box model.

Grammatical structure

align-content: center| flex-start| flex-end| space-between| space-around| stretch;
Copy the code

value

  • center: Lines are aligned to the middle of the flex container.
  • flex-start: Lines are aligned to the starting point of the flex container.
  • flex-end: Lines are aligned to the end point of the flex container.
  • space-between: Rows will be evenly distributed within a row.
  • space-around: The rows will be evenly distributed in a row, with half the space at each end reserved.
  • stretch: By default, the rows will stretch to take up extra space.

The sample code looks like this:

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>The align - content attribute</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            body {
                display: flex;
                flex-wrap: wrap;
            }
            .container {
                display: flex;
                width: 600px;
                height: 500px;
                flex-wrap: wrap;
            }
            .item {
                width: 200px;
            }
            /* align-content: Aligns the rows to the middle of the flex container. - flex-start: Lines are aligned to the starting point of the flex container (top alignment). - flex-end: Lines are aligned to the end of the flex container (bottom alignment). - space-between: Rows are evenly distributed on a row (aligned at both ends and with equal spacing between items). - space-around: The rows will be evenly distributed on a row, with -half of the space on each end (both ends are aligned, and each side of the item is equally spaced). - stretch: Default, rows will stretch to take up extra space. * Note: This property is not valid for single lines, i.e. with flex-wrap: nowrap */
            .center {
                align-content: center; Centered / * * /
            }
            .start {
                align-content: flex-start; /* Top alignment */
            }
            .end {
                align-content: flex-end; /* Base alignment */
            }
            .between {
                align-content: space-between; /* Align both ends so items are equally spaced */
            }
            .around {
                align-content: space-around; /* Align both ends so that the spacing on both sides of the item is equal */
            }
        </style>
    </head>
    <body>
        <div class="container center">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
        </div>
        <div class="container start">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
        </div>
        <div class="container end">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
        </div>
        <div class="container between">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
        </div>
        <div class="container around">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
        </div>
    </body>
</html>

Copy the code

The execution effect is as follows

It is important to note that this property does not apply to single-line elastic box models, i.e. with flex-wrap: nowrap

The flex – flow properties

The CSS Flex-flow property applies to flex container elements. This property is shorthand for the flex-direction and flex-wrap properties. The default value is Row Nowrap.

Grammatical structure

flex-flow: <'flex-direction'> || <'flex-wrap'>
Copy the code

Attributes of a scale item

Order attribute

The CSS Order property specifies the order in which scalable items in an elastic container are laid out. The elements are laid out in ascending order of the values of the order attribute. Elements with the same order attribute value are laid out in the order in which they appear in the source code.

Grammatical structure

.item {
  order: <integer>
}
Copy the code

Attribute values

  • <integer>: indicates the sequential group in which this scalable project resides. Default is 0.

Note: Order only affects the visual order of the elements and does not affect the logical order of the elements.

The sample code

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>Order attribute</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            body {
                display: flex;
                flex-wrap: wrap;
            }
            .container {
                display: flex;
                width: 800px;
                height: 300px;
                align-items: center;
            }
            .item { width: 200px; }/* The order attribute defines the order of items. The smaller the value, the higher the order, the default is 0. * /
            .item1 { order: 2; }
            .item4 { order: -1; }</style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
        </div>
    </body>
</html>

Copy the code

The execution effect is as follows

Using this property makes it very easy to change the layout

The flex – turns up properties

The flex-grow property specifies how much an item grows relative to the rest of the flex items in the same container. The default value is 0

The grammatical structure is as follows:

.item {
  flex-grow: <number>; 
}
Copy the code

The sample code is as follows

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>The flex - turns up properties</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            body {
                display: flex;
                flex-wrap: wrap;
            }
            .container {
                display: flex;
                width: 800px;
                height: 300px;
                align-items: center;
            }
            .item {
                width: 200px;
            }
            /* The flex-grow attribute specifies how much an item grows relative to the rest of the flex items in the same container. The default value is 0 */
            .item2 {
                flex-grow: 2;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item1 item">1</div>
        </div>
    </body>
</html>

Copy the code

The execution effect is as follows

If all flex items have a flex-grow value of 1, they will equally divide the remaining space

If one flex item has a flex-grow value of 2 and the others are 1, it will take up twice as much remaining space as the others.

The flex – the shrink properties

The Flex-shrink property defines the project shrink scale, which defaults to 1, meaning that the project will shrink if there is not enough space.

The grammatical structure is as follows:

.item {
  flex-shrink: <number>; 
}
Copy the code

The sample code is as follows

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>The flex - the shrink properties</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            body {
                display: flex;
                flex-wrap: wrap;
            }
            .container {
                display: flex;
                width: 500px;
                height: 300px;
                align-items: center;
            }
            .item {
                width: 200px;
            }
            The /* flex-shrink property defines the project shrink scale, which defaults to 1, meaning that the project will shrink if space runs out. * /
            .item2 {
                flex-shrink: 2;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item1 item">1</div>
        </div>
    </body>
</html>

Copy the code

The execution effect is as follows

If flex-shrink is a value of 1 for all flex projects, they will be scaled down equally when there is insufficient space

If flex-shrink is 0 for a flex project and the others are 1, the former does not shrink when space is insufficient.

The flex – the basis properties

The Flex-basis property defines the initial size of the project in the main axis direction before allocating excess space. The browser uses this property to calculate whether the main axis has extra space. Its default value is Auto, which is the original size of the project.

The grammatical structure is as follows:

.item {
  flex-basis: <length> | auto; 
}
Copy the code

It can be set to the same value as the Width or height property, for example 230px, and the project will take up a fixed amount of space.

Flex properties

The CSS Flex property is shorthand for flex-grow, flex-shrink, or flex-basis and is used to set how a flex item should be extended or shortened to fit the available space in the flex container.

Grammatical structure

flex: auto | initial | none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]Copy the code
  • noneThe: element is sized according to its height and width. It is completely inelastic: it will neither shorten nor stretch to fit the Flex container. This is equivalent to setting the property to”flex: 0 0 auto“.
  • autoThe: element is sized according to its own width and height, but stretches to absorb the extra free space in the Flex container and shortens itself to fit the Flex container. This is equivalent to setting the property to”flex: 1 1 auto“.

Flex properties can specify one, two, or three values.

Single-valued syntax: The value must be one of the following:

  • A unitless number (<number>): It will be regarded as<flex-grow>The value of the.
  • A valid width value: it is treated as<flex-basis>The value of the.
  • The keywordnone.autoorinitial.

Double value syntax: The first value must be an unitary number, and it will be treated as the value of

. The second value must be one of the following:

  • An unitary number: it will be treated as<flex-shrink>The value of the.
  • A valid width value: it will be treated as<flex-basis>The value of the.

Three-valued syntax:

  • The first value must be an unitary number, and it will be treated as<flex-grow>The value of the.
  • The second value must be an unitary number, and it will be treated as<flex-shrink>The value of the.
  • The third value must be a valid width value, and it will be treated as<flex-basis>The value of the.

The align – self properties

The CSS align-self attribute applies to the flex container element to set the alignment of the flex item’s own elements on the side axis. This property overrides the align-items property. The default value is auto, which is inherited from the parent element’s align-items property

Grammatical structure

align-self: center| flex-start| flex-end| baseline| stretch;
Copy the code
  • center: The flex item is aligned to the middle position of the lateral axis.
  • flex-start: The flex item is aligned to the starting position of the lateral axis.
  • flex-end: The stretch item is aligned to the end position of the lateral axis.
  • baseline: Scale items are aligned according to the baseline of the scale item.
  • stretch: By default, the flex item is stretched to fill the entire flex container.

The sample code

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>The align - self properties</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            body {
                display: flex;
                flex-wrap: wrap;
            }
            .container {
                display: flex;
                width: 600px;
                height: 400px;
                align-items: center;
            }
            .item {
                width: 200px;
            }
            /* the align-self attribute sets the alignment of individual elements */
            .start {
                align-self: flex-start;
            }
            .center {
                align-self: center;
            }
            .end {
                align-self: flex-end;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item start">1</div>
            <div class="item2 item center">2</div>
            <div class="item3 item end">3</div>
        </div>
    </body>
</html>

Copy the code

The execution effect is as follows

(after)

Flexbox Froggy: Flexbox Froggy: Flexbox, Flexbox, Flexbox, Flexbox, Flexbox, Flexbox, Flexbox, Flexbox

The CSS styles used

body {
    margin: 0;
    padding: 20px;
}
.container {
    background-color: #fffae8;
    margin: 30px auto;
}
.item {
    height: 200px;
    width: 200px;
    line-height: 200px;
    text-align: center;
    font-size: 80px;
}
.item1 {
    background-color: #e6005c;
}
.item2 {
    background-color: #777bce;
}
.item3 {
    background-color: #c9780c;
}
.item4 {
    background-color: #fef3c9;
}
.item5 {
    background-color: #ce3b3b;
}
.item6 {
    background-color: #e666ff;
}
.item7 {
    background-color: #f4ea20;
}
.item8 {
    background-color: #b4a4ca;
}

Copy the code