下载掌阅APP，畅读海量书库
立即打开
设计5个元素，水平居中，平均分布于一个带背景色的背景中，如图2-4所示。
图2-4 5个元素
1）页面划分为两个区域，设有背景色，宽度为屏幕的100%。
2）第一个区域中，同一行显示5个子区域，子区域设有背景色，文本居中。
3）第二个区域显示版权信息，设有背景色，字体白色。
1 打开index.wxml，添加＜view class="header"＞组件，并在其中添加5个＜view class="sheader"＞组件。
在编写代码时，要注意规范的缩进，这样可以让代码清晰易读。
养成代码缩进的习惯，是成为优秀编程人员的基本功。
2 打开index.wxss，添加.header、.sheader样式，实现页面效果，如图2-5所示。
图2-5 页面效果
3 打开index.wxml，添加＜view class="copyright"＞、＜view class="scopyright"＞组件，并写上功能介绍和作者信息等文本。
4 打开index.wxss，添加.copyright样式，实现页面效果，如图2-6所示。
图2-6 页面效果
flex布局是什么？
flex是弹性布局，设置了display: flex后，需要再设置justify-content以控制标签内的元素（子元素）布局效果。
justify-content属性用于在flex容器中设置子元素的主轴对齐方式。主轴是flex容器的方向，flex容器的方向由flex-direction的值确定，一个是水平方向，一个是垂直方向。如果容器的flex-direction是row，则主轴为水平方向；如果是column，则主轴为垂直方向。主轴方向确定后，子元素如何布局，还要由justify-content的属性值决定。
justify-content的常用值包括：
flex-start：子元素向主轴起始位置对齐。
flex-end：子元素向主轴结束位置对齐。
center：子元素向主轴中心对齐。
space-between：子元素之间间隔相等，首尾子元素分别贴近主轴起始和结束位置。
space-around：子元素之间间隔相等，首尾子元素间距是子元素与主轴边界间距的两倍。
space-evenly：子元素之间、首尾子元素与主轴边界的间隔相等。