布局 | 我的文档库

Flex布局

父级容器的 class 需要加入 flex

固定尺寸

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

.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

.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

.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}`

Flex布局 ​

固定尺寸 ​

比例布局 ​

水平对齐 ​

垂直对齐 ​

Grid布局 ​

等分列 ​

等高 ​

辅助布局 ​

浮动 ​

内外边距 ​