0%

Vue3.x + Vite2.x 入门实战 02:搞懂各种对齐参数

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


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

概要内容:

  1. text-align
  2. align-item
  3. vertical_align
  4. justify-content

1. text-align

作用:针对行内内容,相对父元素的(横轴)对齐方式

  • 示例:

    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
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    <!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容器的当前行的侧轴(纵轴)方向上的对齐方式

  • 示例
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
40
41
42
43
44
45
46
47
48
<!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

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

  • 示例

    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
    40
    41
    42
    <!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

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

  • 示例:

    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
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    <!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>
  • 示例效果:


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

如何文章对你有益,请给我买杯豆浆喝