Flexible box model

Layout scheme

Traditional layout schemes are mostly implemented using div+css+float+position+display, but with the introduction of the flexible box model in css3, in There is another powerful option in the front-end layout plan.
Because I have been studying small programs recently, I found that using a flexible box layout is more effective and more efficient, so I compiled the relevant knowledge points of the flexible box model and shared them with everyone.

Flexible box model flex layout introduction

Flexbox model (flexbox), also known as flexible layout, is a newly proposed layout method in CSS3. Through flexible layout, child elements can be automatically Adjust the width and height to nicely fill the display space of any display device of different screen sizes.
The flexible box model is completely different from the previous layout method. Although it still uses the div+css method, it replaces the previously used float with a flexible layout. This makes the layout of page elements simpler.
Different from the grid system we will learn later, flexible layout is more suitable for application components and small-scale layout.
Previously, flex went through three iterations, each iteration produced a different syntax. Currently we are learning to follow the final version of the syntax. Because previous versions needed to consider compatibility issues when using them, and with the latest version, all browsers support the ultimate specification without prefixes.

Flexible box model awareness

The flex layout method is a complete layout module, not just a certain attribute. The layout of flex mainly depends on the parent container and elements.
The parent container is called flex container (flex container) and its child elements are called flex items (flex elements).
The core of the entire flex layout lies in its method, arrangement and order.

Using the Flexible Box Model

If you want to use flex layout, you must first use display:flex or display:inline-flex to set the parent container.
display:flex After setting the parent element, the entire parent element will become a flexible container, but it will be a block-level element.
display: After setting inline-flex to the parent element, the entire parent element will become a flexible container, but it will be an inline block-level element, somewhat similar to the effect of inline-block.

When the parent container sets this attribute, all the child elements inside become flex items (flex elements) by default
Tip: Flex layout belongs to another set of layout methods we have learned before. layout scheme, so after using flex layout, some properties such as Block", "inline", "float" and "text-align" will become invalid.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container-flex {
            width: 600px;
            border:1px solid #ccc;
            display:flex;
        }
        .container-inline {
            width: 600px;
            border:1px solid #ccc;
            display:inline-flex;
        }
        .container-flex div {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .container-inline div {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="container-flex">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div class="container-flex">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div class="container-inline">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div class="container-inline">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

Copy after login

The execution effect is as follows:

Flexible box model: Cognition and use of flex box

Explanation of essential terms

Before using the flexible box model, you need to understand some basic conceptual terms of the flexible box model

main axis main axis##. #cross axis The cross axis/side axis is perpendicular to the main axis
main start The starting point of the main axis
main end The end point of the main axis
cross start The starting point of the cross axis
cross end The end point of the cross axis

Flexible box model: Cognition and use of flex box

Why use the elastic box model

The elastic box model is used more frequently when developing mobile phones. It is also a very frequently used technology when developing WeChat mini programs. It can Let’s take a look at the benefits of flexible boxes through a few examples:

Example 1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #item-container {
            display: flex;/*启用flex布局*/
            background-color: pink;
        }
        .square {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .circle {
            border-radius: 50%;
            width: 150px;
            height: 150px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="item-container">
        <div class="circle"></div>
        <div class="square"></div>
        <div class="circle"></div>
    </div>
</body>
</html>

Copy after login

The code results are as follows:

Flexible box model: Cognition and use of flex box

In the above example Points to note:

① Enable flex layout display:flex
② After the parent element sets display:flex, the child elements of the parent element will automatically become the child elements of the flexible box,
Called flex items
③ By default, all flex-items will be aligned according to the top and left side of the flex container

Example 2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #item-container {
            display: flex;/*启用flex布局*/
            background-color: pink;
            justify-content:flex-start;/*默认*/
            justify-content:flex-end;/*在主轴的末端对其*/
            justify-content:center;/*在主轴的中间对其*/
            justify-content:space-between;/*在整个主轴中平均分配空间，无论其中有多少个元素*/
            justify-content:space-around;/*Flex-item 默认会被均匀的分布，但是每一个
                                        都会在其给定的空间内居中显示。*/
            align-items:center;/*让items在垂直方向上居中*/
        }
        .square {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .circle {
            border-radius: 50%;
            width: 150px;
            height: 150px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="item-container">
        <div class="circle"></div>
        <div class="square"></div>
        <div class="circle"></div>
    </div>
</body>
</html>

Copy after login

The code effect is as follows:

Flexible box model: Cognition and use of flex box

We can adjust the alignment method through very simple property settings, for example:

justify-content: flex-start / flex-end /center /space-between /space-around
We can also center items in the vertical direction through the align-items:center attribute

Example 3:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #item-container {
            display: flex;/*启用flex布局*/
            background-color: pink;
            justify-content:flex-start;/*默认*/
            justify-content:flex-end;/*在主轴的末端对其*/
            justify-content:center;/*在主轴的中间对其*/
            justify-content:space-between;/*在整个主轴中平均分配空间，无论其中有多少个元素*/
            justify-content:space-around;/*Flex-item 默认会被均匀的分布，但是每一个
                                        都会在其给定的空间内居中显示。*/
            align-items:center;/*让items在垂直方向上居中*/
        }
        .square {
            width: 200px;
            height: 200px;
            background-color: orange;
            order: -1; /*让正方形显示在第一位而不是中间*/
        }
        .circle {
            border-radius: 50%;
            width: 150px;
            height: 150px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="item-container">
        <div class="circle"></div>
        <div class="square"></div>
        <div class="circle"></div>
    </div>
</body>
</html>

Copy after login

Example 3 is generally similar to Example 2, but in There is an order:-1 in the .square class, which can change the rendering order of elements. This is a very powerful aspect of the flexible box model.

The code effect of Example 3 is as follows:

Flexible box model: Cognition and use of flex box

flex layout attribute

In the entire flex system, it can be roughly divided into two categories, one is the attributes set for the parent container, and the other is the attributes set for the parent container. Attributes set by the element.

Flexible container properties -- properties set for the parent element

1.flex-direction defines how internal elements are laid out in the flex container and defines the direction of the main axis (positive or negative).

grammar:

row | row-reverse | column | column-reverse
row 默认值，子元素会排列在一行从主轴左侧开始
row-reverse 子元素会排列在一行。不过是从右侧开始
column 子元素垂直显示，从侧轴起始点开始
column-reverse 垂直显示，不过从结束点开始

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {
            width: 100%;
            height: 500px;
            border:1px solid #ccc;
            display:flex;
            flex-direction: row-reverse;
            flex-direction: column;
            flex-direction: column-reverse;
        }
        .container div {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

Copy after login

2.flex-wrap 控制容器内的子元素是被强制放在一行中或者是被放在多个行上。如果允许换行，这个属性允许你控制行的堆叠方向。

语法：
nowrap | wrap | wrap-reverse
nowrap 所有的元素被摆在一行默认值
wrap 当一行元素过多，则允许元素换行
wrap-reverse 将侧轴起点和终点颠倒

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    .container {
        width: 600px;
        height: 500px;
        border:1px solid #ccc;
        display:flex;
        flex-wrap:wrap;
        flex-wrap:wrap-reverse;
    }
    .container div {
        width: 200px;
        height: 100px;
        background-color: orange;
    }
</style>
</head>
<body>
<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</div>
</body>
</html>

Copy after login

3.justify-content 属性定义了浏览器如何分配顺着父容器主轴的弹性（flex）元素之间及其周围的空间。

语法：
flex-start | flex-end | center | space-between | space-around
flex-start : 从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。默认
flex-end : 从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐
center : 伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同
space-between : 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
space-around : 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

实例代码:

参考上面的实例2.

4.align-items 属性以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐。

语法：
flex-start | flex-end | center | baseline | stretch
align-items: flex-start; 对齐到侧轴起点
align-items: flex-end; 对齐到侧轴终点
align-items: center; 在侧轴上居中
align-items: baseline; 与基准线对齐
align-items: stretch; 拉伸元素以适应默认值

实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    #item-container {
        display: flex;/*启用flex布局*/
        background-color: pink;
        justify-content:space-around;
        align-items:baseline;/*与基准线对齐*/
    }
    .square {
        width: 200px;
        height: 200px;
        background-color: orange;
    }
    .circle {
        border-radius: 50%;
        width: 150px;
        height: 150px;
        background-color: green;
    }
    .container {
        width: 500px;
        height: 600px;
        border:1px solid #ccc;
        display:flex;
        align-items: stretch;
    }
    .container div {
        width: 100px;
        background-color:red;
        border:1px solid green;
    }
</style>
</head>
<body>
<div id="item-container">
    <div class="circle"></div>
    <div class="square"></div>
    <div class="circle"></div>
</div>
<!-- <div class="container">
    <div>1</div>
    <div>2</div>
</div> -->
</body>
</html>

Copy after login

5.align-content 多行对其方式，如果只有一行，则失效。

语法：
flex-start | flex-end | center | space-between | space-around | stretch
flex-start : 与交叉轴的起点对其
flex-end : 与交叉轴的终点对其
center : 与交叉轴的中点对其
space-between : 与交叉轴两端对其，轴线之间的间隔平均分布
space-around: 所有行在容器中平均分布，相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
stretch ：拉伸所有行来填满剩余空间。剩余空间平均的分配给每一行

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {
            width: 600px;
            height: 900px;
            border:1px solid #ccc;
            display:flex;
            flex-wrap:wrap;
            align-content:flex-start;
            align-content:flex-end;
            align-content:center;
            align-content:space-between;
            align-content:space-around;
            align-content:stretch; /*默认*/
        }
        .container div {
            width: 200px;
            height: 80px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</body>
</html>

Copy after login

弹性元素属性 -- 给子元素设置的属性

order order属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照order属性的值的增序进行布局。拥有相同order属性值的元素按照它们在源代码中出现的顺序进行布局。

语法：
order:

align-self 定义flex子项单独在侧轴（纵轴）方向上的对齐方式

语法：
stretch|center|flex-start|flex-end|baseline

flex-grow 定义弹性盒子元素扩展比率
flex-shrink 定义弹性盒子元素的收缩比率
flex-basis 指定了flex item在主轴方向上的初始大小。如果不使用box-sizing来
改变盒模型的话，那么这个属性就决定了flex item的内容盒content-box）的宽或者高（取决于主轴的方向）的尺寸大小。

Tip:需要注意的是，在上面的最后的flex-grow、flex-shrink、flex-basis 三个属性最好相互搭配使用。

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#main {
    width: 350px;
    height: 100px;
    border: 1px solid #c3c3c3;
    display: flex;
}

#main div {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100px;
}

#main div:nth-of-type(2) {
    flex-shrink: 3;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
</div>
</body>
</html>

Copy after login

ok，上面大概就是一些常用的弹性盒子模型flex-box常用的属性，上面的实例很多只是给了代码，没有给效果图，是因为希望正在学习弹性盒子模型的同志们最好把代码实际的敲一下，并且亲自尝试不同的属性值，来分析不同属性带来的不同的效果。
弹性盒子模型难度不大，但是却与传统的布局方案有很大的差别。

The above is the detailed content of Flexible box model: Cognition and use of flex box. For more information, please follow other related articles on the PHP Chinese website!