mjz update

2023-05-28 18:15:33 +08:00
parent 9b75e60571
commit ed6e2d81fb
243 changed files with 11730 additions and 6 deletions
@@ -0,0 +1,193 @@
+---
+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}` |