<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *
        {
margin: 0px;padding: 0px;
        }
ul
        {
list-style: none;
width: 600px;
height: 600px;
border: 1px solid red;
margin: 100px auto;
display: flex;
flex-direction: row;/*默认的,主轴是行,测轴是列.从左到右排列*/
justify-content: flex-start;/*伸缩项(元素)与主轴的起点对齐*/
/*align-items: flex-start;/*伸缩项与测轴的起点对齐.*/
/* align-items: flex-end;/*伸缩项与侧轴的终点对齐*/
/*align-items: center;伸缩项与侧轴的对齐是居中的*/
align-items: baseline;/*让所有伸缩项中的基线在一条直线上对齐*/
align-items: stretch;/*伸缩项的高度变为测轴的高度.注意点:
            如果需要设置为拉伸对齐, 那么伸缩项不能设置高度
            如果伸缩项设置了高度, 那么拉伸对齐就会失效*/
        }
ul>li{
width: 100px;
/*height: 100px;*/
line-height: 100px;
text-align: center;
font-size: 30px;
background: red;
        }
ul>li:nth-child(2){
padding-top: 100px;
background: green;
        }
ul>li:nth-child(3){
background: blue;
        }
    </style>
</head>
<body>
    <ul>
    <li>yz</li>
    <li>xt</li>
    <li>op</li>
</ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        <style>
        *{
margin: 0;
padding: 0;
        }
ul{
list-style: none;
width: 600px;
height: 600px;
border: 1px solid red;
margin: 100px auto;
display: flex;

        }
ul>li{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 30px;
background: red;
        }
ul>li:nth-child(1){
/*
            如果在伸缩容器中通过 align-items: 来控制伸缩项的对齐方式, 是一次性控制所有伸缩项的对齐方式
            如果想单独的控制某一个伸缩项在侧轴上的对齐方式, 那么需要将控制对齐方式的属性写到伸缩项中
            align-items: 写到伸缩容器中 / 控制所有伸缩项
            align-self: 写到伸缩项中 / 控制编写对应代码的那个伸缩项
            align-self: 的取值和align-items:的取值是一样的, 只是控制的范围和书写的位置不同而已
            align-self是在容器范围内展示的
            */
align-self: flex-end;
        }
ul>li:nth-child(2){
background: green;
align-self: center;
        }
ul>li:nth-child(3){
background: blue;
align-self: flex-start;
        }
    </style>
</head>
<body>
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    </ul>
</body>
</html>