微信小程序 - 布局基础

目录

flex 容器属性详解

flex-direction 决定元素的排列方向

• flex-direction ：column;

设置：

效果如下：

• flex-direction : row

设置：

效果如下：

---

flex-wrap 决定元素如何换行（排列不下时）

---

flex-flow ：flex-direction 和 flex-wrap 的简写

---

justify-content 元素在主轴上的对齐方式

justify-content : flex-start

设置：

效果如下：

回到目录

justify-content : flex-end

设置：

效果如下：

回到目录

justify-content : space-around

设置：

效果如下：

回到目录

justify-content : space-between

设置：

效果如下：

回到目录

---

align-items 元素在交叉轴的对齐方式

align-items : flex-start

设置：

效果如下：

回到目录

align-items : flex-end

设置：

效果如下：

回到目录

align-items : center

设置：

效果如下：

回到目录

align-items : stretch

设置：

效果如下：

回到目录

align-items : baseline

设置：

效果如下：

设置：文字对齐

效果如下：

回到目录

---

flex 元素属性详解

flex-grow 当有多余空间时，元素的放大比例

设置：flex-grow = 0（默认）

效果如下：

设置：

效果如下：

设置：

效果如下：

回到目录

---

flex-shrink 当空间不足时，元素的缩小比例

设置：flex-shrink 当空间不足时，元素的缩小比例，默认值为1，当空间不足时等比缩小

效果如下：

设置：

效果如下：

设置：

效果如下：

回到目录

---

flex-basis 元素在主轴上占据的空间

设置：

效果如下：

回到目录

---

flex 是 grow 、shrink、basis 的简写

---

order 定义元素的排列顺序

设置：

效果如下：

设置：

效果如下：

回到目录

---

align-self 定义元素自身的对齐方式

设置：

效果如下：

回到目录

---

相对定位和绝对定位

理解相对定位和绝对定位

“相对定位的元素是相对==自身==进行定位，参照物是自己。”
“绝对定位的元素是相对==离它最近的一个已定位的父级元素==进行定位”

回到目录

---

相对定位、绝对定位的编码实战

实例：

回到目录

相对定位

回到目录

设置:

效果如下：

回到目录

绝对定位

绝对定位的元素是相对离它最近的一个已定位的父级元素进行定位

设置：

效果如下：

回到目录

设置：

效果如下：

回到目录

设置：

效果如下：

回到目录