微信小程序开发必备必看常用的Flex布局模式－wxflex

最新推荐文章于 2024-07-21 21:06:06 发布

我是陈东东

最新推荐文章于 2024-07-21 21:06:06 发布

阅读量2k

点赞数

分类专栏：微信小程序微信小程序修炼手册文章标签： Flex布局模式 Flex Flex布局 Flex布局

本文链接：https://blog.csdn.net/qq_35084974/article/details/80779983

版权

本文介绍了微信小程序开发中常用的Flex布局模式，包括骰子布局、网格布局、百分比布局和流式布局，并提供了相关CSS代码示例。通过掌握Flex布局，可以简化微信小程序的样式编写，提高开发效率。

摘要由CSDN通过智能技术生成

推荐一个微信小程序开发必备必看常用的Flex布局模式－wxflex，正在做该方面的或者有兴趣的可以看下。

github地址：https://github.com/icindy/wxflex

原文地址： http://weappdev.com/t/flex-wxflex/144

Flex的布局相比传统的float布局来说，简单、快捷、方便。掌握flex布局可以在制作微信小程序时减少wxss的代码，同时也符合微信小程序开发的文档要求。

本代码中涉及到四种Flex的布局方式，分别使用了不同的flex的不同属性。建议看本文最后的学习参考进行相关属性的学习。

下面说说我在使用Flex布局的案例与使用的时候遇到的那些事，希望对大家有些帮助吧！

骰子布局中主要强调几个属性的使用display justify-content align-items align-self等。

CSS代码如下：

.first-face {  
      display: flex;  
      justify-content: center;  
      align-items: center;
}
.second-face {

关注

专栏目录