align-items属性值（垂直对齐）
| 值 | 描述 | 白话文 |
|---|---|---|
| stretch | 默认值。项目被拉伸以适应容器 | 让子元素的高度拉伸适用父容器（子元素不给高度的前提下） |
| center | 项目位于容器的中心 | 垂直居中 |
| flex-start | 项目位于容器的开头 | 垂直对齐开始位置 |
| flex-end | 项目位于容器的结尾 | 垂直对齐结束位置 |
html案例代码
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
section{
width: 60%;
height: 600px;
border: 2px solid pink;
margin: 100px auto;
display: flex;
/*justify-content: flex-start; 让子元素从父容器的开头开始排序 但是盒子顺序不变*/
/*justify-content: flex-end; 让子元素从父容器的后面开始排序 但是盒子顺序不变*/
/*justify-content: center; 让子元素从父容器中间显示*/
/*justify-content: space-between; 左右的盒子贴近父盒子，中间的平均分配空白间距*/
justify-content: space-around; /*相当于给每个盒子添加了左右margin外边距*/
/*align-items: flex-start;*/
/*align-items: flex-end;*/
/*align-items: center;*/
/*align-items: stretch;*/
}
div{
width: 250px;
height: 200px;
}
div:first-child{
background-color: pink;
}
div:nth-child(2){
background-color: purple;
}
div:nth-child(3){
background-color: skyblue;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
</html>
1.案例效果图
pic1.png
2.align-items: flex-start;效果图
pic1.png
3.align-items: flex-end;效果图
pic2.png
4.align-items: center;效果图
pic3.png
4.align-items: stretch;效果图(去掉子类div高度)
pic4.png
如有错误或建议欢迎大家指出与评论哈，希望这篇博文能帮助到大家，也可以分享给需要的人。
如需转载，请注明出处。https://www.jianshu.com/p/0def14fb96a7
网友评论