css align-items的测试<div style="background-color:lightgreen;">

测试源代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jerry 测试</title>
<style>
#main {
    width: 220px;
    height: 300px;
    border: 1px solid black;
    display: flex;
}

#main div {
   flex: 1;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">RED</div>
  <div style="background-color:lightblue;">BLUE</div>
  <div style="background-color:lightgreen;">Green div with more content.</div>
</div>
</body>
</html>

加一行align-items: center

stretch: 默认值。元素被拉伸以适应容器。
如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
center: 元素位于容器的中心。
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

更多Jerry的原创文章，尽在：“汪子熙”: