CSS3 elastic box model (universe explosion details)!

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Elastic box model

What is the elastic box model

CSS3 adds the Flexible Box or FlexBox model, which is a new way to implement layout in HTML pages. This allows the elements to behave predictably as HTML pages adapt to different screen sizes and different devices.

The elastic box model implements HTML page layout independent of direction. Unlike block-level sidecar layouts, inline layouts focus on horizontal orientation.

The elastic box model is mainly suitable for HTML page components and small-scale layouts, but not for large-scale layouts, which may affect HTML page performance.

Concepts related to elastic box models

CSS3’s new elastic box model is a complete module, involving more style attributes. First of all, complete the basic understanding of the relevant concepts of elastic box model.

Concepts related to elastic box models

Flex Container: Wraps the parent element of a flex project.
Flex Item: Scales each child element of a container.
Axis: Each elastic box model has two axes.
- Main axis: The axis along which the flex items are arranged is called the main axis.
- Cross axis: The axis perpendicular to the main axis is called the side axis.
Direction: The main axis of the telescopic container is from the starting point and end point of the main axis, and the side axis is from the starting point and end point of the side axis to describe the direction of the telescopic items.
Dimension: The width and height of the expansion item according to the main and side axes of the expansion container.
- The corresponding spindle is called the spindle size.
- The corresponding side axis is called the side axis dimension.

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 : flex;
display : inline-flex;
Copy the code

Set the specified element to an elastic box model as shown in the example above, which becomes a flex container and its children become flex items.

Flex: Sets an elastic box model that specifies elements as block-level elements.
Inline-flex: Sets the elastic box model that specifies elements as in-line block-level elements.

The elastic box model still has browser compatibility issues:

display : -webkit flex;
display: -ms-flex;
display: -moz-flex;
display: -o-flex;
Copy the code

The flex – direction attribute

The CSS flex-direction property applies to flex container elements that create the direction of the spindle.

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

Row: Sets the spindle to be horizontal.
Row-reverse: Indicates the reverse direction of rows.
Column: Sets the main axis to be vertical.
Column-reverse: indicates the reverse direction of column.

    <style>
        /* Sets display to flex for the parent container element * to indicate that the current element and all its children are elastic box models * by default, all children are flex items (arranged along the main axis) */
        .container {
            border: 1px solid # 000;
            margin-top: 10px;
            display: flex;
            /* flex-direction property * Function - Sets the main axis of the elastic box model (horizontal or vertical) * Usage - Applies to flex container elements * value * row - Default, sets the main axis to horizontal * column - Sets the main axis to vertical */
            flex-direction: row;
         }
         .c2 {
             flex-direction: row-reverse;
         }
        .container div {
            width: 300px;
            height: 100px;
        }
        .container div:nth-child(1) {
            background-color: lavender;
        }
        .container div:nth-child(2) {
            background-color: lightblue;
        }
        .container div:nth-child(3) {
            background-color: lemonchiffon;
        }
    </style>
</head>
<body>
    <div class="container c1">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="container c2">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
Copy the code

Context-content attribute

The CSS context-content property applies to flex container elements and is used to set the alignment of flex items along the main axis.

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

Center: Scale the item to the middle bit of the first row.
Flex — -start: Flex the project to the beginning of the first row.
Flex-end: flex the item to the end of the first line.
Space-between: Scaling items are evenly distributed on a row.
Space-around: Scaling items are evenly distributed in a row, with half the space reserved at each end.

		.c1 {
            /* flex-start - indicates the start of the flex container along the spindle */
            justify-content: flex-start;
        }
        .c2 {
            /* center - represents the middle position of the flex container along the spindle */
            justify-content: center;
        }
        .c3 {
            /* flex-end - indicates the end of the flex container along the main axis */
            justify-content: flex-end;
        }
        .c4 {
            /* space-between - indicates that the flex items are evenly distributed among the flex containers */
            justify-content: space-between;
        }
        .c5 {
            /* space-around - indicates that the flex items are evenly distributed in the flex container, with the start and end positions left blank */
            justify-content: space-around;
        }
Copy the code

The align – the items property

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

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

Center: Flex items aligned to the middle of the side axis.
Flex-start: Flex the project to the starting position of the side axis.
Flex-end: Flex items aligned to the end of the side axis.
Baseline: Flex items are aligned according to the baseline of flex items.
Stretch: Default value, stretch items stretch to fill the entire stretch container.

		.c1 {
            /* flex-start - flex project aligned to the starting position of the side axis */
            align-items: flex-start;
        }
        .c2 {
            /* center - flex the project to align in the middle of the lateral axis */
            align-items: center;
        }
        .c3 {
            /* flex-end - flex items to align to the end of the lateral axis */
            align-items: flex-end;
        }
        .c4 {
            align-items: baseline;
        }
        .c5 {
            align-items: stretch;
        }
Copy the code

The flex – wrap attributes

The CSS flex-wrap property applies to flex container elements and is used to set whether the child elements of a flex container are displayed on a single line or multiple lines.

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

Nowrap: Sets the display of scaling items in a single line. This approach can cause an overflow of the scaling container.
Wrap: Sets the multi-line display of scaling items.
Wrap-reverse: The reverse of wrap.

		.c1 {
            width: 600px;
        }
        /* Flex-wrap property * Action - Sets whether a flex element is displayed on a single line or on multiple lines * Usage - applies to a flex container element * value * NowRAP - Set to single line * Automatically adjusts the width of all child elements based on the width of the flex container * wrap - Set to be displayed on multiple lines * If the width of the flex container is greater than the sum of the widths of all elements -> single line display * if the width of the flex container is less than the sum of the widths of all elements -> multi-line display (similar to floating effect) */
        .c2 {
            width: 600px;
            flex-wrap: nowrap;
        }
        .c3 {
            width: 700px;
            flex-wrap: wrap;
        }
Copy the code

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.

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

Center: Align the rows in the middle of the flex container.
Flex-start: Line aligned to the starting position of the flex container.
Flex-end: lines aligned to the end of the flex container.
Space-between: Rows are evenly distributed in a row.
Space-around: Rows are evenly distributed in a row, with half of the space reserved at each end.
Stretch: Default, rows will stretch to take up extra space.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>The align - content attribute</title>
    <style>
        /* Sets display to flex for the parent container element * to indicate that the current element and all its children are elastic box models * by default, all children are flex items (arranged along the main axis) */
        .container {
            border: 1px solid # 000;
            margin-top: 10px;
            display: flex;
            height: 200px;
            width: 700px;
            height: 300px;
            
            flex-wrap: wrap;
        }
        /* align-content property * Effect - Sets the alignment of multi-line display flex items along the side axis * Note - This property is not valid for single-line display flex items 1. -flex-wrap: wrap; 2. Use the align-content property to set the alignment */
        .c1 {
            align-content: flex-start;
        }
        .c2 {
            align-content: center;
        }
        .c3 {
            align-content: flex-end;
        }
        .container div {
            width: 300px;
            height: 100px;
        }
        .container div:nth-child(1) {
            background-color: lavender;
        }
        .container div:nth-child(2) {
            background-color: lightblue;
        }
        .container div:nth-child(3) {
            background-color: lemonchiffon;
        }
    </style>
</head>
<body>
    <div class="container c1">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="container c2">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="container c3">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>
Copy the code

Note: The current element value is used for multi-line display, single line display is not valid.

The flex – flow properties

The CSS Flex-flow property applies to flex container elements. This property is short for flex-dir ection and flex-wrap.

flexflow: <'flex direction'> II <'flex-wrap'>
Copy the code

Flex properties

The CSS Flex property is a shorthand property that sets how a scaling project can be stretched or shortened to fit the space available in a scaling container.

flex: auta | none I [ <'flex-grow'> <'flex-shrink'>? II <'flex basis'>]Copy the code

Auto: A flex item will be sized according to its width and height, equivalent to setting this property to” Flex: 1 1 Auto “.
None: Flex items are sized based on their width and height, equivalent to setting this property to “Flex: 0 0 Auto”.

The Flex property can specify 1, 2, or 3 values.

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

A unitless number (<number>): It will be taken as<flex-grow>The value of the.
A valid width (width) value: It will be treated as<flex-basis>The value of the.
The keywordnone.autoOr,initial.

Double-valued syntax: The first value must be a unitless number, and it is treated as the value of

. The second value must be one of the following:

A unitless 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.

Ternary syntax:

The first value must be a unitless number, and it will be treated as<flex-grow>The value of the.
The second value must be a unitless 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.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Application of flex properties</title>
    <style>
        /* Sets display to flex for the parent container element * to indicate that the current element and all its children are elastic box models * by default, all children are flex items (arranged along the main axis) */
        .container {
            border: 1px solid # 000;
            margin-top: 10px;
            display: flex;
            height: 200px;
            flex-wrap: wrap;
        }
        .container div {
            width: 300px;
            height: 100px;
            /* Sets the child element to be the same width */
            flex: 1;
        }
        .container div:nth-child(1) {
            background-color: lavender;

        }
        .container div:nth-child(2) {
            background-color: lightblue;
        }
        .container div:nth-child(3) {
            background-color: lemonchiffon;
        }
        .container div:nth-child(4) {
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="container c1">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>
Copy the code

The align – self properties

The CSS align-self property applies to the flex container element and is used to set the alignment of the flex item’s own elements on the side axis.

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

Center: Flex items aligned to the middle of the side axis.
Flex-start: Flex the project to the starting position of the side axis.
Flex-end: Flex items aligned to the end of the side axis.
Baseline: Flex items are aligned according to the baseline of flex items.
Stretch: Default value, stretch items stretch to fill the entire stretch container.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>The align - content attribute</title>
    <style>
        /* Sets display to flex for the parent container element * to indicate that the current element and all its children are elastic box models * by default, all children are flex items (arranged along the main axis) */
        .container {
            border: 1px solid # 000;
            margin-top: 10px;
            display: flex;
            height: 200px;

        }

        .c1 {
            align-items: center;
        }
        .c2 {
            width: 700px;
            height: 300px;
            flex-wrap: wrap;
            align-content: center;
        }
        .c3{}.container div {
            width: 300px;
            height: 100px;
        }
        .container div:nth-child(1) {
            background-color: lavender;
        }
        .container div:nth-child(2) {
            background-color: lightblue;
            /* align-self attribute * Function - Sets the alignment of a specific flex item element on the side axis of the current flex container * usage - applies to the elements of a flex item */
            align-self: center;
        }
        .container div:nth-child(3) {
            background-color: lemonchiffon;      
        }
    </style>
</head>
<body>
    <div class="container c1">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="container c2">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="container c3">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>
Copy the code

Order attribute

The CSS ORDER property applies to flex items and is used to set the order in which flex items are laid out.

order: <integer>
Copy the code

Integer: indicates the sequence of scaling items.

        .container div {
            width: 300px;
            height: 100px;
        }
        .container div:nth-child(1) {
            background-color: lavender;
        }
        .container div:nth-child(2) {
            background-color: lightblue;
        }
        .container div:nth-child(3) {
            background-color: lemonchiffon;      
        }
    </style>
</head>
<body>
    <div class="container c1">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="container c2">
        <! -- Order attribute -- Set the order of scaling items -->
        <div style="order: 2;"></div>
        <div style="order: 1;"></div>
        <div style="order: 3;"></div>
    </div>
Copy the code

CSS3 elastic box model (universe explosion details)!

Elastic box model

What is the elastic box model

Concepts related to elastic box models

Concepts related to elastic box models

Define the elastic box model

The flex – direction attribute

Context-content attribute

The align – the items property

The flex – wrap attributes

The align – content attribute

The flex – flow properties

Flex properties

The align – self properties

Order attribute

Related Posts

React implements the ability to add product spec SKUs and generate merged tables

Cross-domain multi-directional solution

100 lines of code to implement a component reference count plug-in