css伸缩布局 (中)，讲解的到位。哈哈哈。
程序员文章站
2022-04-01 09:15:35
...
<!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>