Text-align, align-item, vertical_align, and justice-content are two of the most commonly used parameters. They can be confusing and often try to influence efficiency 😂.

Tip: only demonstrate the effect of 2-3 attribute values, check the API for the rest

Summary content:

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

1. text-align

Action: Alignment relative to the parent element for inline content

  • Example:

    <! DOCTYPEhtml>
<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>
Copy the code

  • Example effects:

2. align-items

Defines the alignment of flex children in the lateral (vertical) direction of the current row of the Flex container

  • The sample
<! DOCTYPEhtml>
<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>
Copy the code

  • figure

3. vertical-align

Defines the vertical alignment of the baseline of an element in a row with respect to the baseline of the element in the row

  • The sample

    <! DOCTYPEhtml>
<html>

<head>
    <meta charset="utf-8">
    <title>Rookie tutorial (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">a<div class="default">this is a block</div>Block elements aligned by default.</div>
    <div class="parent">a<div class="top">this is a block</div>Text-top aligned block elements.</div>
    <div class="parent">a<div class="bottom">this is a block</div>Text-bottom aligned block elements.</div>
</body>

</html>
Copy the code

  • Example effects:

4. justify-content

Purpose: Set or retrieve the alignment of elastic box elements along the main axis (horizontal axis)

  • Example:

    <! DOCTYPEhtml>
<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>
Copy the code

  • Example effects:

Above: If you find any problems, welcome to point out the message, I timely correction