flex布局——align-items属性垂直之共有flex-start、center、flex-end& justify-content属性水平之space-around、space-between_align-items: flex-end;

作者：从前慢现在也慢 | 2024-03-27 17:04:08

踩

align-items: flex-end;

flex布局——align-items属性垂直之共有flex-start、center、flex-end& justify-content属性水平之space-around、space-between

对容器进行display: flex布局之后，可通过justify-content来调整容器中子元素整体的布局的位置，其值分别有如下几个：
注：以下情况均由主轴为从左到右方向进行，其从下到上的主轴情况原理类似

flex-start（默认值）
即默认状态下的在主轴的左边位置，页面代码如下：

  /* align-items: flex-start; */
justify-content: flex-start;
1
2

效果-水平-开头

在这里插入图片描述

center

设置为center值之后，其子元素整体的位置则是在主轴的中心位置，其效果如下：

align-items: center; // 垂直居中
1

效果-水平-中心

在这里插入图片描述

justify-content: center;  //水平-居中
1

效果

在这里插入图片描述

flex-end

其flex-end则是在主轴的右边位置，效果如下图所示：

align-items: flex-end; // 垂直结尾
1

效果-水平-结尾

在这里插入图片描述

justify-content: flex-end // 水平结尾
1

效果

在这里插入图片描述

space-around-中间间隔
该值会将主轴上剩余空间平均的充斥在各个子元素的周围（类似于有相同的margin-left以及margin-right），效果如下图所示：

justify-content: space-around; // 中间间隔
1

在这里插入图片描述

space-between-两边撑开
space-between与space-around造成的效果类似，稍有不同的为其第一个子项与最后一个和容器直接没有间隔，其效果如下：

justify-content: space-between; // 两边撑开
1

在这里插入图片描述

代码

即默认状态下的在侧轴的上边位置，页面代码如下：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container {
            display: flex;
            margin: 0px auto;
            width: 800px;
            height: 400px;
            background-color: purple;
            align-items: flex-start;
            /* align-items: center; */
            /* align-items: flex-end; */
        }

        .item {
            background-color: pink;
            margin-left: 10px;
            margin-top: 10px;
            width: 250px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div id="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/325692