微信小程序开发Day03——页面设计、弹性布局应用
发布网友
发布时间：2024-08-19 08:25
共1个回答
热心网友
时间：2024-08-27 10:36
1.flex弹性布局
弹性盒状布局，容器控制内部元素布局定位，CSS3新布局模型，伸缩元素，自由填充，自适应。
使用flex布局的优势：
在不同方向排列元素，控制元素排序方向，对齐方式，元素间等距，单个元素放大缩放比例，占比，对齐方式。
flex布局常用术语：
flex容器，flex项目（元素），布局方向。
flex布局模型
模型介绍
容器属性
设置元素排列方向：row（左至右）、rew-reverse（右至左）、column（上至下）、column-reverse（下至上）
使容器元素换行：nowrap（不换行）、wrap（换行）、wrap-reverse（逆向换行）
元素交叉轴对齐方式：flex-start（左对齐）、flex-end（右对齐）、center（居中）、baseline（基于基准线）、stretch（默认拉伸）
元素顺序控制：通过order属性调整
元素放大比例控制：flex-grow，默认为0
元素缩小比例控制：flex-shrink，默认为1
元素空间占比设置：flex-basis
重写父属性：align-self（auto默认继承父级align-items属性）
