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

flex

文章共1,367字 · 阅读需要大约5分钟

一键AI生成摘要，助你高效阅读

问答

viceen

8239人浏览 · 2022-12-04 23:04:09

viceen · 2022-12-04 23:04:09 发布

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;

效果-水平-开头

在这里插入图片描述

center

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

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

效果-水平-中心

在这里插入图片描述

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

效果

在这里插入图片描述

flex-end

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

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

效果-水平-结尾

在这里插入图片描述

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

效果

在这里插入图片描述

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

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

在这里插入图片描述

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

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

在这里插入图片描述

代码

即默认状态下的在侧轴的上边位置，页面代码如下：
<!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>