CSS3 new layout: flex detailed explanation

Flex Basic Concepts

Flex layout (flex is the abbreviation of flexible box), also known as the elastic box model. The tag style in which the attribute and attribute value (display:flex;) are written is the container; all its child elements automatically become container members, called items.

When the display value of an element is flex, all items (child elements) will be displayed in one row; if the sum of the sizes of all items is larger than the container, it will not exceed the width and height of the parent element. No line wrapping (each item will automatically shrink in proportion).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layout: flex</title>
    <link rel="stylesheet" href="./CSS/normalize.css">
    <style>
        section {
            width: 500px;
            height: 800px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
        }
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>
</head>
<body>
    <section>
        <div>01</div>
        <div>02</div>
        <div>03</div>
        <div>04</div>
        <div>05</div>
        <div>06</div>
    </section>
</body>
</html>

Page effect: Each container is scaled down proportionally

There are two types of CSS codes: one is suitable for containers (setting the starting position of the main axis, line breaks, main axis alignment, and multi-axis alignment); the other is suitable for projects (setting the position of the project).

Common properties and property values of containers

Since there are a lot of repeated codes, I will not upload the codes one by one. You can do it yourself, type the code and try it out.

1. Set the starting direction of the main axis flex-direction:

The default is X-axis (row):

<style>
        section {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            /* flex-direction: row; */
            /* flex-direction: row-reverse; */
            /* flex-direction: column; */
            /* flex-direction: column-reverse; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

flex-direction:row; By default, the starting direction of the X axis is the starting position (placed from left to right);

flex-direction:row-reverse; Change the starting direction of the X axis to the ending position (placed from right to left);

Set the starting direction of the main axis to the Y axis (column):

flex-direction:column; By default, the starting direction of the Y axis is the starting position (placed from top to bottom)

flex-direction:column-reverse; Change the starting direction of the Y axis to the end position (placed from bottom to top)

2. Set whether the item wraps flex-wrap: (default is no wrap)

<style>
        section {
            width: 400px;
            height: 400px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            /* flex-wrap: wrap; */
            /* flex-wrap: wrap-reverse; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

flex-wrap: nowrap; The default value is no line break; (n items will be displayed in one line. If the sum of the item sizes is larger than the size of the container's main axis, the items will automatically shrink accordingly.) (Refer to the first code page result display)

flex-wrap: wrap; Set line break; (If it exceeds the width of the main axis, it will be wrapped. After the line break, there will be a gap between the two lines because there is remaining space in the vertical direction, which will be evenly distributed above and below the second line)

flex-wrap: wrap-reverse; wrap in reverse order; (if there are two lines, the second line is displayed in front and the first line is displayed in the back)

3. Alignment of the main axis direction: justify-content:

A project is a:

<style>
        section {
            width: 400px;
            height: 400px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* justify-content: center; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

justify-content:flex-start; Align with the main axis start direction (default)

justify-content:flex-end; Align with the end direction of the main axis

justify-content:center; the main axis is centered

When the project is multiple:

<style>
        section {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            /* justify-content: space-between; */
            /* justify-content: space-around; */
            /* justify-content: space-evenly; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

justify-content: space-between; Align both ends (the first item is at the beginning of the container, the last item is at the end of the container, and the distance in between is equal)

justify-content: space-around; Distributed alignment

justify-content: space-evenly; divide the remaining space equally, and the distance between each item is the same

4. Alignment of the main axis to the cross axis direction

One axis: The main axis needs to be changed to the Y axis: flex-direction: column;

align-items: baseline; Align with the baseline of the first line of text in the item

align-items: stretch; (If the item is not given a height, stretch is the default value. If the item is not set with a height, it is the height of the container)

<style>
        section {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            /* The main axis needs to be changed to Y axis and items are placed in columns*/
            flex-direction: column;
            /* align-items: flex-start; default placement*/
            /* align-items: center; */
            /* align-items: flex-end; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

align-items: flex-start; the cross axis is aligned from the start position

align-items: center; Align the cross axis to the center

align-items: flex-end; the cross axis is aligned from the end position

Multiple axes: (The sum of the sizes of all items must be larger than the size of the container, so that the items wrap and display)

<style>
        section {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            /* align-content: center; */
            /* align-content: flex-end; */
            /* align-content: space-between; */
            /* align-content: space-around; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

align-content: flex-start; the cross axis is aligned from the starting position

align-content: center; Align the cross axis to the center

align-content: flex-end; the cross axis is aligned from the end position

align-content: space-between; Align both ends of the cross axis

align-content: space-around; cross-axis distributed alignment

align-content: space-evenly; evenly distribute the cross axis

The properties and property values of the project:

1. Order controls the position of items

order: 1;

Value: positive or negative (default value is 0)

The smaller the value, the closer it is to the front, and the larger the value, the closer it is to the back.

(Applicable scenarios: 1. Search engine optimization, improve SEO and place important information in the front of the HTML code without affecting the layout 2. Adjust the project position)

<style>
        section {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
        
        div:nth-child(4) {
            order: -1;
        }
    </style>

Set the alignment of one or more [items] on the cross axis:

<style>
        section {
            width: 800px;
            height: 400px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
        
        div:nth-child(2) {
            align-self: center;
        }
        
        div:nth-child(3) {
            align-self:flex-end;
        }
    </style>

align-self: flex-start; Set the item to be placed at the start of the cross axis (default position)

align-self: center; Set the item to be centered on the cross axis

align-self: flex-end; Set the item to be placed at the end of the cross axis

Set the magnification ratio of one or more elements

Condition: The sum of the sizes of all items must be smaller than the size of the container (if there is no remaining space, setting this property has no effect.)

An element has a flex-grow property

<style>
        section {
            width: 800px;
            height: 400px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
        
        div:nth-child(2) {
            flex-grow: 1;
        }
    </style>

Multiple items have flex-grow attributes

<style>
        section {
            width: 800px;
            height: 200px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            box-sizing: border-box;
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
            box-sizing: border-box;
        }
        
        div:nth-child(2) {
            flex-grow: 1;
        }
        
        div:nth-child(4) {
            flex-grow: 2;
        }
    </style>

Effect display

Divide the remaining space of the container into the corresponding number of flex-grow shares, and then distribute it to the items with flex-grow attributes according to the number of shares of each item.

In short, flex is very convenient to use and can be applied to responsive layouts as well as holy grail layouts. It’s just that there are many properties, so you need to practice more and practice more. I believe you will be able to use flex proficiently quickly.

I recommend a small game, which is very interesting and can enhance the use of flex: Flexbox Froggy http://blog.xiaoboswift.com/flexbox/#zh-cn Go and help the little frog go home~~

Summarize

This is the end of this article about CSS3's new layout: detailed explanation of flex. For more relevant css flex layout content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

<<: Advertising skills in the Baidu Union environment (graphic tutorial)

>>: HTML marquee tag usage examples