ant-design/components/layout/demo/flex.md

57 lines
1.2 KiB
Markdown
Raw Normal View History

2015-06-09 22:19:35 +08:00
# Flex Basic
- order: 4
2015-06-15 17:46:42 +08:00
Flex 布局基础。
2015-06-09 22:19:35 +08:00
使用 `row-flex` 定义 `flex` 布局,其子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`,分别定义其在父节点里面的排版方式。
---
````html
<p>子元素居左排列</p>
<div class="row-flex row-flex-start">
2015-06-09 22:19:35 +08:00
<div class="col-4">2</div>
<div class="col-4">2</div>
<div class="col-4">2</div>
<div class="col-4">2</div>
</div>
<p>子元素居中排列</p>
<div class="row-flex row-flex-center">
2015-06-09 22:19:35 +08:00
<div class="col-4">2</div>
<div class="col-4">2</div>
<div class="col-4">2</div>
<div class="col-4">2</div>
</div>
<p>子元素居右排列</p>
<div class="row-flex row-flex-end">
2015-06-09 22:19:35 +08:00
<div class="col-4">2</div>
<div class="col-4">2</div>
<div class="col-4">2</div>
<div class="col-4">2</div>
</div>
<p>子元素等宽排列</p>
<div class="row-flex row-flex-space-between">
2015-06-09 22:19:35 +08:00
<div class="col-4">2</div>
<div class="col-4">2</div>
<div class="col-4">2</div>
<div class="col-4">2</div>
</div>
<p>子元素分散对齐</p>
<div class="row-flex row-flex-space-around">
2015-06-09 22:19:35 +08:00
<div class="col-4">2</div>
<div class="col-4">2</div>
<div class="col-4">2</div>
<div class="col-4">2</div>
</div>
````