ant-design/components/layout/demo/flex-align.md
2015-06-18 15:26:29 +08:00

803 B

Flex对齐

  • order: 5

Flex 子元素垂直对齐。


<p>顶部对齐</p>
<div class="row-flex row-flex-center row-flex-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 row-flex-space-around row-flex-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 row-flex-space-between row-flex-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>