Is there any solution to the misalignment of display:flex text?

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>5-1</title>
    <style type="text/css">
    .a{
        font-size: 20px;
    }
    span{
        font-size: 40px;
    }
    </style>
</head>
<body>
<div class="a"><span>1</span>hello</div>
</body>
</html>

such as the above code!


adisplay:flex

is there any way to solve this alignment problem?

Sep.22,2021

add align-items:center


set justify-content:center and align-items:flex-end to the parent element, so that the elements in div are aligned horizontally and at the bottom on the cross axis.


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>5-1</title>
    <style type="text/css">
    .a{
        display: flex;
        font-size: 20px;
        align-items: flex-end;
        
    }
    span{
        font-size: 40px;
        line-height: 40px;
    }
    </style>
</head>
<body>
<div class="a"><span>1</span>hello</div>
</body>
</html>
Menu