Vue3 x + Vite2 x 入门实战 02：搞懂各种对齐参数提示：只演示2-3种属性值效果，其他去查api即可概要

最常用的text-align、align-item、vertical_align、justify-content 这四个参数容易搞混淆，没搞清楚概念经常循环着尝试影响效率 😂，所以动手实践搞清楚一下。

提示：只演示2-3种属性值效果，其他去查api即可

概要内容：

text-align
align-item
vertical_align
justify-content

1. text-align

作用：针对行内内容，相对父元素的（横轴）对齐方式

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>text-align</title>
    <style>
        .left {
            border: 1px solid black;
            text-align: left;
            width: 600px;
            height: 50px;
        }

        .left .block {
            background: red;
            width: 300px;
            display: inline-block;
        }

        .center {
            border: 1px solid black;
            text-align: center;
            width: 600px;
            height: 50px;
            text-align: center;
        }

        .center .block {
            background: green;
            width: 300px;
            display: inline-block;
        }

        .right {
            border: 1px solid black;
            text-align: right;
            width: 600px;
            height: 50px;
            text-align: right;
        }

        .right .block {
            background: gold;
            width: 300px;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="left">
        <div class="block">
            this is a block , text-align: left;
        </div>
    </div>
    <div class="center">
        <div class="block">
            this is a block, text-align: center;
        </div>
    </div>
    <div class="right">
        <div class="block">
            this is a block, text-align: right;
        </div>
    </div>
</body>

</html>

示例效果：

2. align-items

作用：定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式

示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>align-items</title>
    <style>
        #baseline {
            width: 220px;
            height: 150px;
            border: 1px solid black;
            display: flex;
            align-items: baseline;
        }

        #baseline div {
            flex: 1;
            display: inline-block;
        }

        #center {
            width: 220px;
            height: 150px;
            border: 1px solid black;
            display: flex;
            align-items: center;
        }

        #center div {
            flex: 1;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div id="baseline">
        <div style="background-color:coral;"> align-items</div>
        <div style="background-color:lightblue;">baseline</div>
    </div>
    <div id="center">
        <div style="background-color:coral;"> align-items</div>
        <div style="background-color:lightblue;">center</div>
    </div>

</body>

</html>

示例图

3. vertical-align

作用：定义行内元素的基线相对于该元素所在行的基线的(纵轴)垂直对齐方式

示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        body {
            border: 1px solid black;
        }

        .parent .default {
            background-color: grey;
            display: inline-block;
            height: 50px;
            margin-bottom: 10px;
        }

        .parent .top {
            background-color: red;
            display: inline-block;
            height: 50px;
            vertical-align: text-top;
            margin-bottom: 10px;
        }

        .parent .bottom {
            background-color: olive;
            display: inline-block;
            height: 50px;
            vertical-align: text-bottom;
        }
    </style>
</head>

<body>
    <div class="parent">一个<div class="default">this is a block</div>默认对齐的块元素。</div>
    <div class="parent">一个<div class="top">this is a block</div>text-top 对齐的块元素。</div>
    <div class="parent">一个<div class="bottom">this is a block</div>text-bottom 对齐的块元素。</div>
</body>

</html>

示例效果：

4. justify-content

作用：用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式

示例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>justify-content</title>
    <style>
        .center .contian {
            width: 400px;
            height: 100px;
            border: 1px solid #c3c3c3;
            display: flex;
            justify-content: center;
        }

        .center .contian div {
            width: 70px;
            height: 70px;
        }

        .flex-start .contian {
            width: 400px;
            height: 100px;
            border: 1px solid #c3c3c3;
            display: flex;
            justify-content: flex-start;
        }

        .flex-start .contian div {
            width: 70px;
            height: 70px;
        }

        .space-between .contian {
            width: 400px;
            height: 100px;
            border: 1px solid #c3c3c3;
            display: flex;
            justify-content: space-between;
        }

        .space-between .contian div {
            width: 70px;
            height: 70px;
        }
    </style>
</head>

<body>

    <div class="center">
        <div>justify-content: center;</div>
        <div class="contian">
            <div style="background-color:coral;"></div>
            <div style="background-color:lightblue;"></div>
        </div>
    </div>
    <div class="flex-start">
        <div>flex-start</div>
        <div class="contian">
            <div style="background-color:coral;"></div>
            <div style="background-color:lightblue;"></div>
        </div>
    </div>
    <div class="space-between">
        <div>space-between</div>
        <div class="contian">
            <div style="background-color:coral;"></div>
            <div style="background-color:lightblue;"></div>
        </div>
    </div>
</body>

</html>

示例效果：

以上: 如发现有问题，欢迎留言指出，我及时更正