---
title: 布局
date: 2023-05-28 10:34:38
permalink: /pages/basics/layout
article: false
---

## Flex布局
父级容器的 `class` 需要加入 `flex`

### 固定尺寸
> css
```css
.basis-xs   所占比例 20%
.basis-sm   所占比例 40%
.basis-sub  所占比例 50%
.basis-lg   所占比例 60%
.basis-xl   所占比例 80%
```

> 演示代码
```vue
<view class="flex flex-wrap">
    <view class="basis-xs bg-grey margin-xs padding-sm radius">xs(20%)</view>
    <view class="basis-df"></view>
    <view class="basis-sm bg-grey margin-xs padding-sm radius">sm(40%)</view>
    <view class="basis-df"></view>
    <view class="basis-df bg-grey margin-xs padding-sm radius">sub(50%)</view>
    <view class="basis-lg bg-grey margin-xs padding-sm radius">lg(60%)</view>
    <view class="basis-xl bg-grey margin-xs padding-sm radius">xl(80%)</view>
</view>
```

### 比例布局
> css
```css
.flex-sub     所占比例 1
.flex-twice   所占比例 2
.flex-treble  所占比例 3
```

> 演示代码
```vue
<!-- 1:1 -->
<view class="flex">
    <view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
    <view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
</view>
<!-- 1:2 -->
<view class="flex  p-xs margin-bottom-sm mb-sm">
    <view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
    <view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
</view>
<!-- 1:2:3 -->
<view class="flex  p-xs margin-bottom-sm mb-sm">
    <view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
    <view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
    <view class="flex-treble bg-grey padding-sm margin-xs radius">3</view>
</view>
```

### 水平对齐
父容器的 class 中加入 `justify-start|end|center|between|around`

> css
```css
.justify-start    对齐方式 从行首开始排列
.justify-end      对齐方式 从行尾开始排列
.justify-center   对齐方式 居中排列
.justify-between  对齐方式 均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点
.justify-around   对齐方式 均匀排列每个元素，每个元素之间的间隔相等
```

> 演示代码
```vue
<view class="flex solid-bottom padding justify-start">
    <view class="bg-grey padding-sm margin-xs radius">start</view>
    <view class="bg-grey padding-sm margin-xs radius">start</view>
</view>
<view class="flex solid-bottom padding justify-end">
    <view class="bg-grey padding-sm margin-xs radius">end</view>
    <view class="bg-grey padding-sm margin-xs radius">end</view>
</view>
<view class="flex solid-bottom padding justify-center">
    <view class="bg-grey padding-sm margin-xs radius">center</view>
    <view class="bg-grey padding-sm margin-xs radius">center</view>
</view>
<view class="flex solid-bottom padding justify-between">
    <view class="bg-grey padding-sm margin-xs radius">between</view>
    <view class="bg-grey padding-sm margin-xs radius">between</view>
</view>
<view class="flex solid-bottom padding justify-around">
    <view class="bg-grey padding-sm margin-xs radius">around</view>
    <view class="bg-grey padding-sm margin-xs radius">around</view>
</view>
```

### 垂直对齐
父容器的 class 中加入 `align-start|end|center`
> css
```css
.align-start  对齐方式 元素位于容器的开头，弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
.align-end    对齐方式 元素位于容器的结尾，弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
.align-center 对齐方式 元素位于容器的中心，弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
```

> 演示代码
```vue
<view class="flex solid-bottom padding align-start">
    <view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
    <view class="bg-grey padding-sm margin-xs radius">start</view>
</view>
<view class="flex solid-bottom padding align-end">
    <view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
    <view class="bg-grey padding-sm margin-xs radius">end</view>
</view>
<view class="flex solid-bottom padding align-center">
    <view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
    <view class="bg-grey padding-sm margin-xs radius">center</view>
</view>
```

## Grid布局

### 等分列
class 加入 `grid col-1|2|3|...`

> 演示代码
```vue
<view class="grid margin-bottom text-center" v-for="(item,index) in 5" :key="index" :class="'col-' + (index+1)">
    <view class="padding" :class="indexs%2==0?'bg-cyan':'bg-blue'" v-for="(item,indexs) in (index+1)*2" :key="indexs">{{indexs+1}}</view>
</view>
```

### 等高
在 class 中加入 `grid col-4|5|... grid-square`

```vue
<view class="grid col-4 grid-square">
    <view class="bg-img" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
</view>

<script>
export default {
    data() {
        return {
            avatar:['https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'],
        };
    },
}
</script>
```

## 辅助布局

### 浮动
在 class 加入 `fl|fr`，在父容器 class 加入 `cf`

> 演示代码
```vue
<view class="cf padding-sm">
    <view class="bg-grey radius fl padding-sm">ColorUi fl</view>
    <view class="bg-grey radius fr padding-sm">ColorUi fr</view>
</view>
```

### 内外边距
`size=xs|sm|默认|lg|xl`，属性后面没有跟上 size 就是默认

| 属性 | 值 |
| ---- | :--- |
| xs | `10upx` |
| sm | `20upx` |
| 默认 | `30upx` |
| lg | `40upx` |
| xl | `50upx` |

| 内容 | css 属性 |
| ---- | :--- |
| 外边距 | `margin-{size}` |
| 内边距　 | `padding-{size}` |
| 水平方向外边距 | `margin-lr-{size}` |
| 水平方向内边距 | `padding-lr-{size}` |
| 垂直方向外边距 | `margin-tb-{size}` |
| 垂直方向内边距 | `padding-tb-{size}` |
| 上外边距 | `margin-top-{size}` |
| 上内边距 | `padding-top-{size}` |
| 右外边距 | `margin-right-{size}` |
| 右内边距 | `padding-right-{size}` |
| 下外边距 | `margin-bottom-{size}` |
| 下内边距 | `padding-bottom-{size}` |
| 左外边距 | `margin-left-{size}` |
| 左内边距 | `padding-left-{size}` |