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>
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1ea7a25-47c35.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1ea7a25-47c35.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?