位置:电子教程 > Flex Box小程序应用 (如果看不到内容请使用360浏览器) 推荐学习资源
Flex Box基本概念
Flex容器的属性
Flex项目的属性
Flex布局样例
当前阅读教程:Flex Box小程序应用 > Flex布局样例
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 对齐和居中(margin) 下一篇: 暂无

我们下面定义一个基本的布局,长宽都是250px的方框,背景为灰色,然后我们在基本的布局内实现Flex的各种演示,基本布局代码示例

小白教程网www.2d5.net

如下:

<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>

 

示例

小白教程网www.2d5.net

1效果如图7-48所示,.wxml文件代码如下:

<div style="display:flex;">
  <div></div>
</div>

image.png

示例

小白教程网www.2d5.net

2效果如图7-49所示,.wxml文件代码如下:

<div style="display:flex;justify-content: center;">
  <div></div>
</div>

image.png

示例

小白教程网www.2d5.net

3效果如图7-50所示,.wxml文件代码如下:

<div style="display:flex;justify-content: flex-end;">
  <div></div>
</div>

image.png

示例

小白教程网www.2d5.net

4效果如图7-51所示,.wxml文件代码如下:

<div style="display:flex;align-items:center;">
  <div></div>
</div>

image.png

示例

小白教程网www.2d5.net

5效果如图7-52所示,.wxml文件代码如下:

<div style="display:flex;justify-content:center;align-items:center;">
  <div></div>
</div>

image.png

示例

小白教程网www.2d5.net

6效果如图7-53所示,.wxml文件代码如下:

<div style="display:flex;justify-content:flex-end;align-items:center;">
  <div></div>
</div>

image.png



上一篇: 对齐和居中(margin) 下一篇: 暂无
计算机毕业设计作品网      毕业设计文档网      小程序教程网       毕业设计资料网  |         毕业设计定制QQ:45157718(微信同号)(备注:毕设)