教你快速上手Flex弹性盒布局（容器属性）（三）

2023-08-24 46

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 教你快速上手Flex弹性盒布局（容器属性）

五，align-items - cross轴-垂直布局

设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式

stretch：默认值，如果项目未设置高度过auto，子元素会被拉伸以适应容器
flex-start：元素位于容器开头
flex-end：元素位于容器结尾
center：元素位于容器中心
baseline：元素位于容器的基线上
使用这个之前要先把flex-direction:column调成纵向

5.1，align-items:center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:column;
            align-items:center;
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

垂直方向居中

6ec9fdfaf7c456e167f628d5e81c0280_78cd76ca4c7b4a78a9d74720c9805fd0.png

5.2，align-items:flex-end;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:column;
            align-items:flex-end;
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

cross轴底部对齐

1e817ac346b8ba71717a80dc31464f65_7cfc491c9c2941418c37a610463f3fcf.png

5.3，align-items:flex-end;

使用这个之前要先把flex-direction：row调成默认

然后再div里加上高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:row;
            align-items:flex-end;
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div style="height: 100px;">第一个子元素</div>
        <div style="height: 200px;">第二个子元素</div>
        <div style="height: 300px;">第三个子元素</div>
    </div>
</body>
</html>

默认值，如果项目未设置高度过auto，子元素会被拉伸以适应容器

3e17b3fd1e0606be19be25baaa1f6a8d_7b2323e41df342338c410b2c1ad7bb87.png

5.4，align-items:flex-start;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:row;
            align-items:flex-start;
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div style="height: 100px;">第一个子元素</div>
        <div style="height: 200px;">第二个子元素</div>
        <div style="height: 300px;">第三个子元素</div>
    </div>
</body>
</html>

元素位于容器开头

c3fc1ec8fc819fb9da3709a1014d2e2f_15efe96432804751909afd637cf28b79.png

5.5，align-items:center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:row;
            align-items:center;
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div style="height: 100px;">第一个子元素</div>
        <div style="height: 200px;">第二个子元素</div>
        <div style="height: 300px;">第三个子元素</div>
    </div>
</body>
</html>

元素位于容器中心

f51eaee75d8595aa36eeb7c55ebf0365_dfafc0e4114d4f81a57d9209d43243b3.png

5.6，align-items:baseline;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:row;
            align-items:baseline;
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div style="height: 100px;">第一个子元素</div>
        <div style="height: 200px;">第二个子元素</div>
        <div style="height: 300px;">第三个子元素</div>
    </div>
</body>
</html>

元素位于容器的基线上

dbffb72782a1aaf97c90a65e24eecbf9_6ba47ec4b2ad4421ac7e4f79f2a342f1.png

六，flex-wrap - 换行、换列

6.1，align-items:stretch;;

注意

在div加上宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:row;
            align-items:stretch;
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div style="height: 100px; width: 40%;">第一个子元素</div>
        <div style="height: 200px; width: 40%;">第二个子元素</div>
        <div style="height: 300px; width: 40%;">第三个子元素</div>
    </div>
</body>
</html>

fffd664a5f7b56522bc2c8674315af89_d933acf7f25a4b8bbb62bd27bd226238.png

6.2，flex-wrap:wrap;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:row;
            align-items:stretch;
            flex-wrap: nowrap;
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div style="height: 100px; width: 40%;">第一个子元素</div>
        <div style="height: 200px; width: 40%;">第二个子元素</div>
        <div style="height: 300px; width: 40%;">第三个子元素</div>
    </div>
</body>
</html>

默认值。意思是不换行、换列。

当flex项目的总宽度超过容器的宽度，flex项目将按照原有比例强行等分，且不换行。

9be8be91c48c94d951a1fe06d6fe16e9_9a82cf809aac4c95a1b39154ed321f76.png

6.3，flex-wrap:wrap;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:row;
            align-items:stretch;
            flex-wrap: wrap;
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div style="height: 100px; width: 40%;">第一个子元素</div>
        <div style="height: 200px; width: 40%;">第二个子元素</div>
        <div style="height: 300px; width: 40%;">第三个子元素</div>
    </div>
</body>
</html>

换行、换列。当flex项目的总宽度超过容器的宽度，将自然换行、换列。且每一行（列）等分容器。

8ef5571c136e496da1d2cb967bdc78ab_4bb5811e205a4219986c964041be6fb7.png

教你快速上手Flex弹性盒布局（容器属性）（三）

五，align-items - cross轴-垂直布局

六，flex-wrap - 换行、换列

热门文章

最新文章

相关课程

相关电子书