当前位置：首页 - 正文

微信小程序开发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属性）

声明：本网页内容为用户发布，旨在传播知识，不代表本网认同其观点，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。
E-MAIL:11247931@qq.com

焦点

微信小程序开发Day03——页面设计、弹性布局应用

最新推荐

猜你喜欢

热门推荐