有些文档写的很难懂，今天硬生生的试验效果试验出来了，用注释总结了下各个样式的效果，因为可以设置方向，所以这里用主轴和侧轴的术语描述，没有使用横向和纵向或者行和列的术语，仅使用换行中行的概念，注意如果主轴是列方向，则换行是横向排列的；还需要注意stretch拉伸元素受行的高度限制，如果盒子中有一行则，高度最大是盒子的高度，如果盒子两行，则stretch 元素高度是所在行其他元素最高的高度：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 500px;
height: 550px;
background-color: lightgrey;
flex-direction: column; /*主轴方向，row或者是column，或是反向的 row 和 column*/
flex-wrap:wrap; /*子元素超出弹性盒子边界是否换行*/
justify-content:space-between; /*主轴方向元素对齐方式*/
align-items:center; /*主轴方向上的元素在侧轴方向的对齐方式，可以被弹性盒子中的元素的align-self覆盖，默认是拉伸*/
align-content: space-around ; /*换行后行与行之间的对齐方式，默认是拉伸*/
}
.flex-item {
background-color: cornflowerblue;
width: 80px;
min-height: 100px;border:solid 1px #000;
}
.item1 {
-webkit-align-self: flex-start;
align-self: flex-start;
height:150px;
}
.item2 {
-webkit-align-self: flex-end;
align-self: flex-end;
}
.item3 {
-webkit-align-self: center;
align-self: center;
}
.item4 {
-webkit-align-self: baseline;
align-self: baseline;
}
.item5 {
-webkit-align-self: stretch;
align-self: stretch;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item item1">flex-start 1 </div>
<div class="flex-item item2">flex-end 2 </div>
<div class="flex-item item3">center 3 </div>
<div class="flex-item item4">baseline 4 </div>
<div class="flex-item item5">stretch 5</div>
<div class="flex-item " style="width:30px;">6</div>
<div class="flex-item item1">flex-start 1</div>
<div class="flex-item item2">flex-end 2</div>
<div class="flex-item item3">center 3</div>
<div class="flex-item item4">baseline 4</div>
<div class="flex-item item5">stretch 5</div>
</div>
</body>
</html>
了解 工作生活心情记忆 的更多信息
订阅后即可通过电子邮件收到最新文章。