align-items

align-items 属性以与 justify-content 相同的方式在侧轴方向上将当前行上的弹性元素对齐。

align-items: flex-start | flex-end | center | baseline | stretch

HTML

<ul id="box" class="box">
 <li>a</li>
 <li>b</li>
 <li>c</li>
</ul>
<h4>align-items:flex-end</h4>
<ul id="box2" class="box">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<h4>align-items:center</h4>
<ul id="box3" class="box">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<h4>align-items:baseline</h4>
<ul id="box4" class="box">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<h4>align-items:strecth</h4>
<ul id="box5" class="box">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

CSS

.box{
  display:-webkit-flex;
  display:flex;
  width:200px;
  height:100px;
  margin:0;
  padding:0;
  border-radius:5px;
  list-style:none;
  background-color:#eee;}
.box li{
  margin:5px;
  border-radius:5px;
  background:tomato;
  text-align:center;
  color:#fff;
}
.box li:nth-child(1){
  padding:10px;
}
.box li:nth-child(2){
  padding:15px 10px;
}
.box li:nth-child(3){
  padding:20px 10px;
}
#box{
  align-items:flex-start;//规定元素向侧轴起点对齐。
}
#box2{
  align-items:flex-end;//规定元素向终点对齐。
}
#box3{
  align-items:center;//规定元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。
}
#box4{
  align-items:baseline;//规定所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将于侧轴起点对齐以确定基线。
}
#box5{
  align-items:strecth;//规定弹性元素被在侧轴方向被拉伸到容器相同的高度或宽度。
}

执行结果

align-items:flex-start

• a
• b
• c

align-items:flex-end

• a
• b
• c

align-items:center

• a
• b
• c

align-items:baseline

• a
• b
• c

align-items:strecth

• a
• b
• c