06-flex layout for mobile web

1. Basic Concepts

• Flex layout is also called telescopic layout, flexible layout, telescopic box layout, flexible box layout
• Flex is the abbreviation of Flexible Box, which means "flexible layout", and is used to provide maximum flexibility for the box model.
• Any container can be designated as a Flex layout.
• When we set the flex layout for the parent box, the float, clear, and vertical-align attributes of the child elements will be invalid.
• Flex layout is to control the position and arrangement of child boxes by adding flex attributes to the parent box.

1. Features of flex

• The element with display: flex; is called the parent item.
• The parent-child element in the parent is called a child.
• There is a default horizontal axis to the right in the parent item called the main axis.
• The parent has an axis that is perpendicular to the main axis and defaults to vertical downwards is called the side axis.
• With flex set, no matter what element display mode the sub-items have, they have the right to set the width and height.

Second, the parent attribute in flex

1. Change the spindle direction (flex-direction)

            /* 改变主轴方向 */
            /* 主轴垂直向下，当主轴占据侧轴位置时，侧轴会转换到主轴位置上，且方向时钟水平向右 */
            /* flex-direction: column; */

            /* 主轴垂直向上，侧轴水平向右 */
            /* flex-direction: column-reverse; */

            /* 默认值，主轴水平向左，侧轴垂直向下 */
            /* flex-direction: row; */

            /* 主轴水平向右，侧轴垂直向下 */
            flex-direction: row-reverse;

note

• Can only control the direction of the spindle
• The main axis and the side axis are completely different from the x and y axes.
• What the spindle controls is actually the direction of control flow.
• When the main axis is in the vertical direction, it occupies the position of the side axis. At this time, the side axis will be converted to the main axis direction, and the direction is always horizontal to the right.

2. Change the order of subitems on the main axis (justify-content)

            /* 默认从起点到终点排列 */
            /* justify-content: flex-start; */

            /* 从终点到起点排列 */
            /* justify-content: flex-end; */

            /* 居中对齐 */
            justify-content: center;

            /* 先固定；两端，剩下的元素平分剩下的空间 */
            /* justify-content: space-between; */

            /* 每个子项两侧的间隔相等。所以，子项之间的间隔比子项与边框的间隔大一倍 */
            /* justify-content: space-around; */

            /* 均衡分布,子项分分父相空间 */
            justify-content: space-evenly;

3. Set the arrangement of sub-items on the side axis (align-items single line)

         /* 从起点到终点 */
            /* align-items: flex-start; */
            /* 从终点到起点 */
            /* align-items: flex-end; */
            /* 居中对齐 */
            /* align-items: center; */

            /* 拉伸，默认值
            当侧轴处置垂直向下时，如果子项未设置高度或设为auto，将占满整个容器的高度。
            当侧轴水平向右时 如果子项未设置宽度或设为auto，将占满整个容器的宽度*/
            align-items: stretch;

The default value is stretch

4. Line break (flex-wrap)

By default, the child elements are not wrapped. If they cannot be opened, the width of the child elements will be reduced, forcing a line to be arranged.

            /* 默认不换行，强行缩小子元素使其在一行上显示 */
            flex-wrap: nowrap;

            /* 换行 */
            /* flex-wrap: wrap; */

            /* 反向换行 */
            /* flex-wrap: wrap-reverse; */

note

• The width of all children must be greater than the width of the parent to wrap, otherwise even setting the wrap will not work.
• Why is the spacing between lines so large when wrapping?
  Reason: Since the default attribute of the side axis is stretch, the parent element is stretched into as many copies as there are rows. Each row in each copy is aligned at the starting point, and the height of each row in each copy is the gap between the rows. .
  Solution: 1. Set align-content: flex-atart;
  2. Remove the height of the box or auto to cover the entire parent item.

4. Set the arrangement of the children on the side axis (align-content)

            /* 换行 */
            flex-wrap: wrap;
            /* 起点对齐 */
            /* align-content: flex-start; */

            /* 终点对齐 */
            /* align-content: flex-end; */

            /* 居中对齐 */
            /* align-content: center; */

            /* 环绕对齐 */
            /* align-content: space-around; */

            /* 两端对齐 */
            /* align-content: space-between; */

            /* 默认 */
            /* align-content: stretch; */

Note: must be set on the premise of line breaks

5. Six-sided dice case

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transform-style: preserve-3d;
            animation: tou 1s infinite linear;
        }

        @keyframes tou {
            0% {
                transform: rotate(0);
            }

            100% {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

        .container:hover {
            animation-play-state: paused;
        }

        section[class ^='box'] {
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            width: 200px;
            height: 200px;
            margin-top: 10px;
            background-color: #09f;
            padding: 20px;
            border: 1px solid #000;
        }

        section .dot {
            width: 30px;
            height: 30px;
            background-color: #000;
            border-radius: 50%;
        }

        /* 前面 */
        .box1 {
            transform: translateZ(120px);
            justify-content: center;
            align-items: center;
        }

        /* 后面 */
        .box2 {
            transform: translateZ(-120px);
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
        }

        /* 左面 */
        .box3 {
            transform: rotateY(90deg) translateZ(120px);
            justify-content: space-between;
        }

        .box3 div:nth-child(2) {
            align-self: center;
        }

        .box3 div:nth-child(3) {
            align-self: flex-end;
        }

        /* 右面 */
        .box4 {
            transform: rotateY(-90deg) translateZ(120px);
            flex-direction: column;
            justify-content: space-between;
        }

        .info {
            display: flex;
            justify-content: space-between;
        }

        /* 上面 */
        .box5 {
            transform: rotateX(90deg) translateZ(120px);
            flex-direction: column;
            justify-content: space-between;
        }

        .box5>.dot {
            align-self: center;
        }

        .box6 {
            transform: rotateX(-90deg) translateZ(120px);
            flex-direction: column;
            justify-content: space-between;
        }
    </style>
</head>

<body>
    <div class="container">
        <section class="box1">
            <div class="dot"></div>
        </section>
        <section class="box2">
            <div class="dot"></div>
            <div class="dot"></div>
        </section>
        <section class="box3">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </section>
        <section class="box4">
            <div class="info">
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
            <div class="info">
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
        </section>
        <section class="box5">
            <div class="info">
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
            <div class="dot"></div>
            <div class="info">
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
        </section>
        <section class="box6">
            <div class="info">
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
            <div class="info">
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
            <div class="info">
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
        </section>
    </div>
</body>

</html>

6. Details on the fourth side

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            /* 2.将大盒子设为容器 */
            display: flex;
            /* 3.转换主轴方向 */
            flex-direction: column;
            /* 4.主轴两端对齐 */
            justify-content: space-between;
            width: 150px;
            height: 150px;
            margin: 100px auto;
            background-color: #09f;
            padding: 30px;
        }

        section .info {
            /* 1.设为容器，子项沿主轴两端对齐 */
            display: flex;
            justify-content: space-between;
            border: 1px solid #000;
        }

        section .info .dot {
            width: 30px;
            height: 30px;
            background-color: #000;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <section class="container">
        <div class="info">
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="info">
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
    </section>
    </div>
</body>

</html>

7.flex-flow attribute

The flex-flow attribute is a composite attribute of flex-direction and flex-wrap attributes

            flex-flow:row wrap;
            /* 复合写法，没有顺序 */
            flex-flow: column wrap;

Three. Flex item properties

1.order attribute

The order attribute defines the order of items. The smaller the value, the higher the arrangement, the default is 0.

        .info1 {
            order: 1;
        }

        .info3 {
            order: -1;
        }

3. align-self attribute

        .info2 {
            align-self: center;
        }

        .info3 {
            align-self: flex-end;
        }

4.flex attribute

4.1 flex-grow

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 400px;
            height: 350px;
            margin: 50px auto;
            background-color: #f34;
            border: 2px solid #000;
        }

        /* 子相可以设置宽高 */
        span {
            width: 50px;
            height: 50px;
            margin: -1px;
            background-color: #09f;
            border: 2px solid #fff;
        }

        /* order是定义子项的排列顺序，默认值是0，数字越小，排列越靠前 */
        .box1 span:nth-child(3) {
            order: -1;
        }

        .box1 span:first-child {
            order: 1;
        }

        .box2 {
            align-items: center;
        }

        /* align-self是单独控制自己在侧轴上的排列方式 */
        .box2 span:first-child {
            align-self: flex-start;
        }

        .box2 span:nth-child(3) {
            align-self: flex-end;
        }

        /* flex-grow:是子项占父项目宽度 */
        .box3 span:first-child {
            flex-grow: 2;
        }

        .box3 span:nth-child(3) {
            flex-grow: 1;
        }

        /* flex-shrink：表示当flex容器空间不足是，会将子项进行收缩，默认是1，0表示不收缩，值越大收缩越厉害 */
        .box4 span:first-child {
            flex-shrink: 0;
        }

        .box4 span:nth-child(3) {
            flex-shrink: 2;
        }

        /* flex-basis：定义分配空间前子项的默认大小 */
        .box5 span:first-child {
            flex-basis: 10px;
        }

        .box5 span:nth-child(3) {
            flex-basis: 100px;
        }

        /* flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 */
        .box6 span:first-child {
            flex: 0 0 30px;
        }

        .box6 span:nth-child(3) {
            flex: 1 1 auto;
        }
    </style>
</head>

<body>
    <div class="box1">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
    <div class="box2">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
    <div class="box3">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>


    </div>
    <div class="box4">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
    <div class="box5">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
    <div class="box6">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>

</html>

4.1 flex-shrink

    <div class="container container2">
        <div class="info">1</div>
        <div class="info">2</div>
        <div class="info">3</div>
        <div class="info">4</div>
        <div class="info">5</div>
        <div class="info">1</div>
        <div class="info">2</div>
        <div class="info">3</div>
        <div class="info">4</div>
        <div class="info">5</div>
    </div>

        /* flex-shrink：表示当flex容器空间不足是，会将子项进行收缩，默认是1，0表示不收缩，值越大收缩越厉害 */
        .container2 .info:first-child {
            flex-shrink: 0;
        }

        .container2 .info:nth-child(3) {
            flex-shrink: 2;
        }

        .container2 .info:nth-child(6) {
            flex-shrink: 5;
        }

4.1 flex-basis

    <div class="container container3">
        <div class="info">1</div>
        <div class="info">2</div>
        <div class="info">3</div>
        <div class="info">4</div>
        <div class="info">5</div>
    </div>

        /* flex-basis：定义分配空间前子项的默认大小 */
        .container3 .info:first-child {
            flex-basis: 10px;
        }

        .container3 .info:nth-child(3) {
            flex-basis: 100px;
        }

        .container3 .info:nth-child(5) {
            flex-basis: 20%;
        }

4.4 flex

        /* flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 */
        .container4 .info:first-child {
            flex: 0 0 30px;
        }

        .container4 .info:nth-child(3) {
            flex: 1 1 auto;
        }

        .container4 .info:nth-child(5) {
            flex: 1;
        }

    <div class="container container4">
        <div class="info">1</div>
        <div class="info">2</div>
        <div class="info">3</div>
        <div class="info">4</div>
        <div class="info">5</div>
    </div>

In general, flex only writes one value, which means that the child accounts for the share of the parent. For example, there are 6 boxes, each flex = 1; then each box accounts for 1/6 of the parent phase.

Related recommendation:
online demo flex website
https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/