第 1-1 课：微信小程序实操弹性盒子

开篇
- 【系】微信小程序云开发实战坚果商城-开篇
基础篇
- 【系】微信小程序云开发实战坚果商城-弹性盒子
- 【系】微信小程序云开发实战坚果商城-ES6 简单入门
- 【系】微信小程序云开发实战坚果商城-官方案例先运行
前端篇
- 【系】微信小程序云开发实战坚果商城-商城项目搭建
- 【系】微信小程序云开发实战坚果商城-所有目录…

1 弹性盒子

网页布局（ layout ）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2009年，W3C 提出了一种新的方案---- Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

前两段摘自阮一峰的 flex 布局教程，关于 flex 布局相关知识，大家可以参考阮一峰的 flex 布局教程：语法篇和 flex 布局教程：实例篇。在此篇中不能为大家一一展示弹性盒子的每一个功能，所以大家在给的实例中，练习之余还是多多看上一句我给的两个 flex 阮一峰的链接，flex 在实际开发中能大大提高我们的开发效率，在开篇就介绍 flex ，也是因为微信小程序对弹性盒子支持非常好的，笔者在日常开发中也会经常使用 flex 来提高开发效率。

block 、inline 与 inline-block

块级元素（ block )，即一个元素独占一行，小程序里的view组件类似于html里的 div 标签，是块级元素；
行内元素（ inline ）在一行内依次排列，但是不能设置高宽；
行内块元素（ inline-block ）具有行内元素特性，同时可以设置高宽。任何一个容器都可以指定为 Flex 布局 display : flex ; 行内元素也可以使用 Flex 布局。

display : inline-flex; 注意设为 Flex 布局以后，子元素的 float 、clear 和 vertical-align 属性将失效。

在官方的给的文档中只是简单的介绍了弹性盒子（官方地址），接下来我将同样使用四个小方块给大家做演示，对于开发者来说谷歌浏览器是日常必备，这里就采用谷歌浏览器的配色给大家做展示，发车发车。

例如:

index.xml :

<view class="container"><view class='flex-item bg1' /><view class='flex-item bg2' /><view class='flex-item bg3' />
</view>

index.wxss :

.flex-item{width:100px;height:100px;
}
.bg1{background-color:#ff3f34;
}
.bg2{background-color:#fbbf00;
}
.bg3{background-color:#44ac45;
}

运行效果：

view 相等于 div，此段代码每一个 view 块级元素，每一个 view 独占一行，这里我们使用 display 来改变块级元素与行内元素相互转换。

任何一个容器都可以指定为 Flex 布局。

<view class="container"><view class='flex-item bg1' /><view class='flex-item bg2' /><view class='flex-item bg3' />
</view>

.container{display: flex;
}
.flex-item{width:100px;height:100px;
}
.bg1{background-color:#ff3f34;
}
.bg2{background-color:#fbbf00;
}
.bg3{background-color:#44ac45;
}

现在我们将 flex-item 块级元素设置成行内块元素。

.flex-item{display: inline-block; /**使得变为行业元素**/ width:100px;height:100px;
}

2 容器的属性

常用为以下6个属性设置在容器上。

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

2.1 flex-direction 属性

flex-direction 属性决定主轴的方向（即项目的排列方向）。

.container {flex-direction: row | row-reverse | column | column-reverse;
}

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

在这里我就抽出 row 和 column 这两个常用的为大家讲解。

2.1.2 row

<!--pages/test/test.wxml-->
<view class="container"><view class='flex-item bg1' ><text>1</text></view><view class='flex-item bg2' ><text>2</text></view><view class='flex-item bg3' ><text>3</text></view><view class='flex-item bg4' ><text>4</text></view>
</view>

/* pages/test/test.wxss */
.container {width: 700rpx;margin-left: 25rpx;display: flex;flex-direction: row;
}.flex-item {width: 130rpx;height: 130rpx;border-radius: 10rpx 10rpx;
}.bg1 {background-color: #ff3f34;
}.bg2 {background-color: #fbbf00;
}.bg3 {background-color: #44ac45;
}.bg4 {background-color: #2f84d5;
}

2.1.1 column

.container {width: 700rpx;margin-left: 25rpx;display: flex;flex-direction: column;
}

2.2 flex-wrap 属性

设置是否允许项目多行排列，以及多行排列时换行的方向。

.container{flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap（默认）：不换行。
wrap ：换行，第一行在上方。
wrap-reverse ：换行，第一行在下方。

wrap 日常使用频率最高。

2.2.1 wrap

<!--pages/test/test.wxml-->
<view class="container"><view class='flex-item bg1' ><text>1</text></view><view class='flex-item bg2' ><text>2</text></view><view class='flex-item bg3' ><text>3</text></view><view class='flex-item bg4' ><text>4</text></view>
</view>

/* pages/test/test.wxss */
.container {width: 700rpx;margin-left: 25rpx;display: flex;
}.flex-item {width: 200rpx;height: 200rpx;border-radius: 10rpx 10rpx;margin: 10rpx;
}
.bg1 {background-color: #ff3f34;
}
.bg2 {background-color: #fbbf00;
}
.bg3 {background-color: #44ac45;
}
.bg4 {background-color: #2f84d5;
}

在这里我将每一个小方块长度和宽度分别调整为 200 ，很明显方块很明显就变形了。

当我们设置了 flex-wrap : wrap 属性，方块超出一定的部分就自动换行解决被挤压的情况。

.container {width: 700rpx;margin-left: 25rpx;display: flex;flex-wrap: wrap;
}

2.3 justify-content 属性

justify-content 属性定义了项目在主轴上的对齐方式。

.container {justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

2.3.1 flex-end

为了让方块很容易看清楚这里调整了大小为 100 。为 container 添加属性 justify-content : flex-end

.container {width: 700rpx;margin-left: 25rpx;display: flex;justify-content:flex-end;
}.flex-item {width: 100rpx;height: 100rpx;border-radius: 10rpx 10rpx;margin: 10rpx;
}
.....

2.2.2 space-between

将 container 中的属性 justify-content 中的 flex-end 修改为 space-between 。

.container {width: 700rpx;margin-left: 25rpx;display: flex;justify-content:space-between;
}

2.4 align-items 属性

align-items 属性定义项目在交叉轴上如何对齐。

.container{align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-star ：交叉轴的起点对齐。

flex-end ：交叉轴的终点对齐。

center ：交叉轴的中点对齐。

baseline : 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为 auto ，将占满整个容器的高度。

在这里为了更好的展现这个属性，我将第二个方块高度设置成 200 rpx ; 在进行 align-items 交叉轴的中点对齐。

2.4.1 center

<!--pages/test/test.wxml-->
<view class="container"><view class='flex-item bg1' ><text>1</text></view><view class='flex-item bg2' ><text>2</text></view><view class='flex-item bg3' ><text>3</text></view><view class='flex-item bg4' ><text>4</text></view>
</view>

/* pages/test/test.wxss */.container {width: 700rpx;margin-left: 25rpx;display: flex;align-items: center;
}.flex-item {width: 100rpx;height: 100rpx;border-radius: 10rpx 10rpx;margin: 10rpx;
}.bg1 {background-color: #ff3f34;
}.bg2 {background-color: #fbbf00;width: 100rpx;height: 160rpx;
}.bg3 {background-color: #44ac45;
}.bg4 {background-color: #2f84d5;
}

2.4.1 flex-end

.container {width: 700rpx;margin-left: 25rpx;display: flex;align-items: flex-end;
}

3 容器的组合

3.1 导航栏菜单

<view class="container"><view class='flex-item bg1' ><text>1</text></view><view class='flex-item bg2' ><text>2</text></view><view class='flex-item bg3' ><text>3</text></view><view class='flex-item bg4' ><text>4</text></view>
</view>

.container{width: 700rpx;margin-left: 25rpx;display: flex;/* 两端对齐，项目之间的间隔都相等  */justify-content: space-between;
}
.flex-item{width:130rpx;height:130rpx;border-radius: 10rpx 10rpx;
}
.bg1{background-color:#ff3f34;
}
.bg2{background-color:#fbbf00;
}
.bg3{background-color:#44ac45;
}
.bg4{background-color:#2f84d5;
}

只使用了 display: flex; 和 justify-content: space-between; 让我们的菜单导航栏分布均匀，相隔相等。

下面的内容在首页中和个人中心特定菜单栏想对比较多

<view class="container"><view class='flex-item' ><view class="tab bg1"></view><text>栏目1</text></view><view class='flex-item' ><view class="tab bg2"></view><text>栏目2</text></view><view class='flex-item' ><view class="tab bg3"></view><text>栏目3</text></view><view class='flex-item' ><view class="tab bg4"></view><text>栏目4</text></view>
</view>

.container{width: 680rpx;margin-left: 30rpx;display: flex;/* 两端对齐，项目之间的间隔都相等  */justify-content: space-between;
}
.flex-item{display: inline-flex;/**flex-direction 属性决定主轴的方向*/flex-direction: column;/* justify-content: center; */align-items:center;
}
.tab{width:130rpx;height:130rpx;border-radius: 10rpx 10rpx;
}.bg1{background-color:#ff3f34;
}
.bg2{background-color:#fbbf00;
}
.bg3{background-color:#44ac45;
}
.bg4{background-color:#2f84d5;
}

flex-direction 改变主轴方向，如下：

<!--index.wxml-->
<view class="container"><view class='flex-item' ><view class="tab bg1">图片</view><text>栏目1</text></view><view class='flex-item' ><view class="tab bg2">描述</view><text>栏目2</text></view>
</view>
<view class="container reverse"><view class='flex-item' ><view class="tab bg3">描述</view><text>栏目3</text></view><view class='flex-item' ><view class="tab bg4">图片</view><text>栏目4</text></view>
</view>

/**index.wxss**/
.container{width: 680rpx;margin-left: 30rpx;display: flex;flex-wrap: wrap;}
.flex-item{display: inline-flex;flex-direction: column;align-items:center;
}
.tab{width:300rpx;height:300rpx;border-radius: 10rpx 10rpx;margin: 20rpx;
}.bg1{background-color:#ff3f34;
}
.bg2{background-color:#fbbf00;
}
.bg3{background-color:#44ac45;
}
.bg4{background-color:#2f84d5;
}
.reverse{display: flex;flex-direction: row-reverse;
}

在弹性盒子 flex-direction: row-reverse，轻松改变第二个块元素改变方向。

部署不成功、图片无法显示、数据库无法获取，快速部署坚果商城，欢迎微信搜索「山间木匠」，后台回复关键字「坚果商城」获取最新PDF

源码地址

在搭建项目前，根据自己需要下载本系列文章的源代码

本项目源码地址：https://gitee.com/mtcarpenter/nux-shop

【系】微信小程序云开发实战坚果商城-弹性盒子相关推荐

【系】微信小程序云开发实战坚果商城-云开发开篇
第 3-2 课:云开发开篇目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系]微信 ...
【系】微信小程序云开发实战坚果商城-开篇
开篇:无服务开发是未来? 目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系]微信小 ...
【系】微信小程序云开发实战坚果商城-商城项目搭建
第 2-1 课:商城项目搭建目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系]微 ...
【系】微信小程序云开发实战坚果商城-扩展篇
第 5-1 课:扩展篇目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系]微信小程 ...
【系】微信小程序云开发实战坚果商城-前端之订单实现
第 2-7 课:前端之订单实现目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系] ...
【系】微信小程序云开发实战坚果商城-云开发之商品信息和主题商品数据实现
第 3-8 课:云开发之商品信息和主题商品数据实现目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES ...
【系】微信小程序云开发实战坚果商城-云开发之订单品数据实现
第 3-9 课:云开发之订单品数据实现目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 ...
【系】微信小程序云开发实战坚果商城-前后端交互之订单实现
第 4-7 课:前后端交互之订单实现目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 ...
【系】微信小程序云开发实战坚果商城-云开发之首页数据实现
第 3-6 课:云开发之首页数据实现目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 ...

【系】微信小程序云开发实战坚果商城-弹性盒子