[Improvement] Layout: support flex (#1305)

This commit is contained in:
neverland
2018-06-19 22:54:02 +08:00
committed by GitHub
parent 6e25b9823a
commit c368e36aea
10 changed files with 321 additions and 120 deletions
@@ -4,23 +4,50 @@ exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-row">
<div class="van-col van-col-8">span: 8</div>
<div class="van-col van-col-8">span: 8</div>
<div class="van-col van-col-8">span: 8</div>
<div class="van-col van-col--8">span: 8</div>
<div class="van-col van-col--8">span: 8</div>
<div class="van-col van-col--8">span: 8</div>
</div>
<div class="van-row">
<div class="van-col van-col-4">span: 4</div>
<div class="van-col van-col-10 van-col-offset-4">offset: 4, span: 10</div>
<div class="van-col van-col--4">span: 4</div>
<div class="van-col van-col--10 van-col--offset-4">offset: 4, span: 10</div>
</div>
<div class="van-row">
<div class="van-col van-col-12 van-col-offset-12">offset: 12, span: 12</div>
<div class="van-col van-col--12 van-col--offset-12">offset: 12, span: 12</div>
</div>
</div>
<div>
<div class="van-row" style="margin-left:-10px;margin-right:-10px;">
<div class="van-col van-col-8" style="padding-left:10px;padding-right:10px;">span: 8</div>
<div class="van-col van-col-8" style="padding-left:10px;padding-right:10px;">span: 8</div>
<div class="van-col van-col-8" style="padding-left:10px;padding-right:10px;">span: 8</div>
<div class="van-col van-col--8" style="padding-left:10px;padding-right:10px;">span: 8</div>
<div class="van-col van-col--8" style="padding-left:10px;padding-right:10px;">span: 8</div>
<div class="van-col van-col--8" style="padding-left:10px;padding-right:10px;">span: 8</div>
</div>
</div>
<div>
<div class="van-row van-row--flex">
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
</div>
<div class="van-row van-row--flex van-row--justify-center">
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
</div>
<div class="van-row van-row--flex van-row--justify-end">
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
</div>
<div class="van-row van-row--flex van-row--justify-space-between">
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
</div>
<div class="van-row van-row--flex van-row--justify-space-around">
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
</div>
</div>
</div>