align-items 属性定义flex baseline、stretch属性（2）

align-items属性定义项目在纵轴上的对齐方式，默认值为stretch，适用于项目在纵轴上高度不一样的情况
align-items属性定义项目在交叉轴上如何对齐
这个属性使用的大前提：
（1）主轴方向： flex-direction: row; 是水平（你的项目需要在水平方向上展示出来！）
（2） 这些项目在 交叉轴上 显示的位置：3个特殊点： 交叉轴的上方、交叉轴的中间、交叉轴的下方。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
默认对齐方式，如果项目未设置高度或设为auto，将占满整个容器的高度。

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>

css：当item的宽度设置为20px时；

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

/* 弹性容器 */
body {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 弹性容器 */
.container {
  /* 将 盒子 转成 弹性容器 */
  display: flex;
  display: -webkit-flex;
  /* 设置主轴方向 和 换行方式 */
  flex-direction: row;
  flex-wrap: nowrap;
  height: 200px;
  width: 50%;
  justify-content: center;
  /* stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 */
  /* 这个值使用的 大前提是：当前弹性元素.container .item 没有高度 */
  align-items: stretch;
  outline: 1px dashed red;
}

此时演示图为：

此时将item的宽度改成auto：

.container .item{ 
	width: 150px; 
	height: auto; 
	border: 1px solid black; 
}

代码演示：此时的item的高度会撑满父元素。