mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-19 11:58:41 +08:00
40 lines
800 B
Markdown
40 lines
800 B
Markdown
# Flex Align
|
|
|
|
- order: 5
|
|
|
|
Flex 子元素垂直对齐
|
|
|
|
|
|
---
|
|
|
|
|
|
````html
|
|
<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>
|
|
````
|
|
|
|
|
|
|
|
|