align-items属性
总有五个属性
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
1.在没有加这个属性的时候
<!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>align.html</title>
<style>
div {
width: 700px;
height: 600px;
margin: 20px auto;
border: 1px solid red;
/* 弹性布局 */
display: flex;
/* 默认(写不写都可以) */
flex-direction: row;
}
span{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 30px;
background-color: pink;
margin-left: 10px;
}
div span:nth-child(1){
height: 150px;
}
div span:nth-child(3){
height: 200px;
}
div span:nth-child(5){
height: 140px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<!-- 后面可以增加，随着<span></span>的增加，宽度将会变小，而不是被挤出去 ，或者换行-->
</div>
</body>
</html>
2. aligin-item:flex-start
3. algin-items:flex-end
4. aligin-items:center
5. algin-items:baseline
当没有加这个代码的时候
<!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>align.html</title>
<style>
div {
width: 700px;
height: 600px;
margin: 20px auto;
border: 1px solid red;
/* 弹性布局 */
display: flex;
/* 默认(写不写都可以) */
flex-direction: row;
}
span{
width: 100px;
height: 100px;
font-size: 30px;
background-color: pink;
margin-left: 10px;
}
div span:nth-child(1){
height: 150px;
}
div span:nth-child(3){
height: 200px;
}
div span:nth-child(5){
height: 140px;
}
div span:nth-child(1){
padding-top: 30px;
}
div span:nth-child(3){
padding-top: 100px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<!-- 后面可以增加，随着<span></span>的增加，宽度将会变小，而不是被挤出去 ，或者换行-->
</div>
</body>
</html>
当加了这个属性之后
6. algin-items:strecch
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。也就是说这个属性写不写都没有影响，不写的话就会默认是这个属性。
如下代码,其中的几个没有设置高，并且没有写这个属性。
<!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>align.html</title>
<style>
div {
width: 700px;
height: 600px;
margin: 20px auto;
border: 1px solid red;
/* 弹性布局 */
display: flex;
/* 默认(写不写都可以) */
flex-direction: row;
/* align-items: stretch; */
}
span{
width: 100px;
/* height: 100px; */
font-size: 30px;
background-color: pink;
margin-left: 10px;
}
div span:nth-child(1){
height: 150px;
}
div span:nth-child(3){
height: 200px;
}
div span:nth-child(5){
height: 140px;
}
div span:nth-child(1){
padding-top: 30px;
}
div span:nth-child(3){
padding-top: 100px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<!-- 后面可以增加，随着<span></span>的增加，宽度将会变小，而不是被挤出去 ，或者换行-->
</div>
</body>
</html>
所以要有时候要要注意它的默认值对于没有设置高的时候的影响
本文含有隐藏内容，请 开通VIP 后查看