flex-align.md

# Flex Align

- order: 5 

Flex 子元素垂直对齐


---


````html
<div class="row-flex center top">
  <div class="col-4 hight-100">2</div>
  <div class="col-4 hight-50">2</div>
  <div class="col-4 hight-120">2</div>
  <div class="col-4 hight-80">2</div>
</div>
<p>顶部对齐</p>

<div class="row-flex space-around middle">
  <div class="col-4 hight-100">2</div>
  <div class="col-4 hight-50">2</div>
  <div class="col-4 hight-120">2</div>
  <div class="col-4 hight-80">2</div>
</div>
<p>居中对齐</p>

<div class="row-flex space-between bottom">
  <div class="col-4 hight-100">2</div>
  <div class="col-4 hight-50">2</div>
  <div class="col-4 hight-120">2</div>
  <div class="col-4 hight-80">2</div>
</div>
<p>底部对齐</p>

````