css realizes flex layout, and the content in the blocks on both sides is aligned up, down, left, and right, for ul and li

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    ul {
        list-style: none;
    }

    .content {

        display: flex;
        width: 1240px;
        margin: 100px auto;
    }

    .bigbox1 {
        width: 500px;
        height: 100px;
        background-color: pink;
    }

    /* 让ul对齐 */
    .bigbox1 ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* 一定要设高度 才能垂直居中 */
        height: 80px;
    }

    .bigbox1 ul li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }

    .bigbox1 ul li span {}

    .kuai {
        width: 20px;
        /* 这个高度要和左边的名字的行高看准 这样就可以对齐了 */
        height: 20px;
        margin-top: 10px;
        background-color: purple;
    }


    .bigbox2 {
        flex: 1;
        background-color: blue;
    }

    .bigbox2 ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* 一定要设高度 才能垂直居中 */
        height: 80px;
    }

    .bigbox2 ul li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .bigbox2 ul li h2 {}

    .bigbox2 ul li span {
        font-size: 20px;
        line-height: 20px;
    }
</style>

<body>
    <div class="content">
        <div class="bigbox1">
            <ul>
                <li>
                    <span>hello</span>
                    <div class="kuai"></div>
                </li>
            </ul>
        </div>
        <div class="bigbox2">
            <ul>
                <li>
                    <h2>11</h2>
                    <span>名字</span>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

running result:

Difficulty 1. How to align the left block and the right name, observe the font size, set the line height, and then set the height of the left block, these three values are the same

css realizes flex layout, and the content in the blocks on both sides is aligned up, down, left, and right, for ul and li

Guess you like