当前阅读教程:Flex Box小程序应用 > Flex布局样例 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 对齐和居中(margin) | 下一篇: 暂无 |
我们下面定义一个基本的布局,长宽都是250px的方框,背景为灰色,然后我们在基本的布局内实现Flex的各种演示,基本布局代码示例 如下: <style> /* 定义一个带颜色的背景方框 */ .flex-container { /*display: -webkit-flex; */ /*display: flex; */ width: 250px; height: 250px; background-color: lightgrey; } /* 定义一个长宽都是70的圆形 */ .flex-item{ background-color: cornflowerblue; width: 70px; height: 70px; border-radius:50%; margin:10px; } </style>
示例1效果如图7-48所示,.wxml文件代码如下: <div style="display:flex;"> <div></div> </div> 示例2效果如图7-49所示,.wxml文件代码如下: <div style="display:flex;justify-content: center;"> <div></div> </div> 示例3效果如图7-50所示,.wxml文件代码如下: <div style="display:flex;justify-content: flex-end;"> <div></div> </div> 示例4效果如图7-51所示,.wxml文件代码如下: <div style="display:flex;align-items:center;"> <div></div> </div> 示例5效果如图7-52所示,.wxml文件代码如下: <div style="display:flex;justify-content:center;align-items:center;"> <div></div> </div> 示例6效果如图7-53所示,.wxml文件代码如下: <div style="display:flex;justify-content:flex-end;align-items:center;"> <div></div> </div> |
|
上一篇: 对齐和居中(margin) | 下一篇: 暂无 |