共计 6393 个字符，预计需要花费 16 分钟才能阅读完成。
CSS 常用布局在小程序中的应用
所有 css 布局的根本都是 3 个基本概念：定位、浮动、外边距操纵
我们其他的布局实现方式，都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。
正常文档流（Normal Flow）：正常布局流是指在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。默认的文档流，确保在没有任何 css 样式的时候，还能够正确的渲染和显示内容。使页面具有比较好的可读性以及合理性。(position display float table flex-box grid-layout)
默认情况下，元素是如何布局的？（引用自 https://developer.mozilla.org）
首先，取得元素的内容来放在一个独立的元素盒子中，然后在其周边加上内边距、边框和外边距。(盒子模型）
一个块级元素的内容宽度默认是其父元素的 100%，其高度与其内容高度一致。行内元素的 height width 与内容一致。你无法设置行内元素的 height width。如果你想控制行内元素的尺寸，你需要为元素设置 display: block;（或者，display: inline-block; inline-block 混合了 inline 和 block 的特性。)
那独立元素之间又是如何相互影响的呢？正常布局流是一套在浏览器视口内放置、组织元素的系统。默认情况下，块级元素按照在文档中书写出现的顺序放置 — 每个块级元素会在上一个元素下面另起一行，它们会被设置好的 margin 分隔。
行内元素的表现有所不同 — 它们不会另起一行；只要在其父级块级元素的宽度内有足够的空间，它们与其他行内元素、相邻的文本内容（或者被包裹的）被安排在同一行。如果空间不够，溢出的文本或元素将移到新的一行。
如果两个相邻的元素都设置了 margin 并且两个 margin 有重叠，那么更大的设置会被保留，小的则会消失 — 这被称为外边距叠加。
我们在传统的 css 布局当中，不管是 css2 还是 css3，大致囊括了 静态布局 、 流式布局 、 弹性布局 、 自适应布局 、 响应式布局 、 网格布局。对于 css 的这些布局方式，在小程序中又是怎样的呈现方式呢？我们分别来看一看。
1. 静态布局（Static Layout）
固定宽度布局。宽度以像素为单位。（当然我们还可以使用其他的绝对长度单位）
缺点：无论窗口多大，尺寸不变。无法充分利用空间。行长和文本易读性不好。
静态布局就是传统的网站形式：对于 PC 设计一个居中布局，窗口缩小时，内容被遮挡，呈现横竖向滚动条。对于移动设备，单独建立一个 m. 域名及相应的移动网站。
静态布局在小程序中一般很少出现。因为如果使用静态布局，就无法做到不同屏幕自适应，750px 的设计稿在小屏幕的手机上就会出现滚动条。
呈现效果如下：
// wxml 代码
<view class='page'>
<view class='header'> 静态布局 </view>
<view class='content'>
<text> 静态布局内容部分在小程序中的呈现。小程序 page 样式在 overflow-x
上默认是 hidden。</text>
</view>
</view>
// 样式如下
page {overflow-x:scroll;}
.page, .header, .content {width: 750px;}
.content {background: #ccc;}2. 流式布局（Liquid Layout）（百分比布局）
流式布局 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。
使用百分比实现：流式布局能够相对于浏览器窗口进行伸缩。
缺点：窗口宽度较小，行变得非常窄，很难阅读。需要设置 min-width 来解决，但是如果 min-width 较大的话，也会有静态布局相同的限制。宽度太宽，同样会存在行长过长的问题。
流式布局（Liquid）的特点（也叫 ”Fluid”) 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。
我们来看看在小程序中使用流式布局的效果：
在不同的屏幕大小下呈现出来的效果如下：
<!-- wxml 代码 -->
<view class='page fluid'>
<view class='header fluid__header'> 流式布局 </view>
<view class='content'>
<!-- 两列 -->
<view class='wrapper'>
<view class='grid-item grid-half'>
<text> 我是左侧部分 </text>
</view>
<view class='grid-item grid-half'>
<text> 我是右侧部分 </text>
</view>
</view>
<!-- 三列 -->
<view class='wrapper'>
<view class='grid-item grid-three'>
<text> 我是左侧部分 </text>
</view>
<view class='grid-item grid-three'>
<text> 我是中间部分 </text>
</view>
<view class='grid-item grid-three'>
<text> 我是右侧部分 </text>
</view>
</view>
</view>
</view>/* css 代码 */
.fluid, .content, .wrapper {
width: 100%;
box-sizing: border-box;
}
.wrapper {
height: 200px;
margin-bottom: 20px;
}
.wrapper .grid-item {
height: 100%;
background: #ccc;
display: inline-block;
box-sizing: border-box;
}
.wrapper .grid-half {width: 48%;}
.wrapper .grid-half:nth-child(2n) {margin-left: 4%;}
.wrapper .grid-three {width: 32%;}
.wrapper .grid-three:not(:first-child) {margin-left: 2%;}
3. 弹性布局（Flex Layout）
CSS 弹性盒子布局 是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。
对 Flex 的理解可以参考阮一峰 Flex 布局教程：语法篇。在此不做详细说明。那我们看看在小程序中 Flex 布局的使用。依然还是上一个例子中的 wxml，我们只需要修改对应的 class 以及 css 即可。
<!-- wxml 代码 -->
<view class='page fluid'>
<view class='header fluid__header'> 流式布局 </view>
<view class='content'>
<!-- 两列 -->
<view class='wrapper'>
<view class='grid-item grid-half'>
<text> 我是左侧部分 </text>
</view>
<view class='grid-item grid-half'>
<text> 我是右侧部分 </text>
</view>
</view>
<!-- 三列 -->
<view class='wrapper'>
<view class='grid-item grid-three'>
<text> 我是左侧部分 </text>
</view>
<view class='grid-item grid-three'>
<text> 我是中间部分 </text>
</view>
<view class='grid-item grid-three'>
<text> 我是右侧部分 </text>
</view>
</view>
</view>
</view>/* css 代码 */
.wrapper {
display: flex;
height: 200px;
margin-bottom: 20px;
justify-content: space-between;
}
.wrapper .grid-item {
height: 100%;
flex: 1;
background: #ccc;
}
.wrapper .grid-item:not(:first-child) {margin-left: 10px;}我们能够看到与流式布局显示出来的效果是有一定的差别的，在 item 之间的 margin 值，我们可以设定一个固定值，而不用去考虑 item 宽度的变化。而流式布局中想要实现这样的效果，只要想改变中间的间距，我们都需要重新计算下 item 的宽度。当然在上一个流式布局的例子中还可以配合 float 或者使用 padding 来实现这一点。
4. 自适应布局（Adaptive）
自适应布局（Adaptive）的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。在 pc 以及移动端都可能涉及到的布局当中，我们可以使用媒体查询来实现不同屏幕分辨的布局。示例
5. 响应式布局（Responsive layout）
响应式布局（Responsive）的特点是分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。
可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
6. 网格布局
CSS 网格布局 擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是 HTML 生成了这些区域）。
像表格一样，网格布局让我们能够按行或列来对齐元素。然而在布局上，网格比表格更可能做到或更简单。例如，网格容器的子元素可以自己定位，以便它们像 CSS 定位的元素一样，真正的有重叠和层次。详情请参考阮一峰 CSS Grid 网格布局教程
我们来看示例，如何实现一个三行三列的布局？n 行 n 列呢？
<!-- wxml 代码 -->
<view class='page'>
<view class='header'>
<text>Grid 布局 </text>
</view>
<view class='content'>
<view class='wrapper'>
<view class='grid-item'>
<text>1</text>
</view>
<view class='grid-item'>
<text>2</text>
</view>
<view class='grid-item'>
<text>3</text>
</view>
<view class='grid-item'>
<text>4</text>
</view>
<view class='grid-item'>
<text>5</text>
</view>
<view class='grid-item'>
<text>6</text>
</view>
<view class='grid-item'>
<text>7</text>
</view>
<view class='grid-item'>
<text>8</text>
</view>
<view class='grid-item'>
<text>9</text>
</view>
</view>
</view>
</view>.wrapper {
display: grid;
/* grid-template-columns: 100px 100px 100px; */
/* grid-template-columns: repeat(3, 100px); */
grid-template-columns: repeat(3, 1fr);
/* grid-template-rows: 100px 100px 100px; */
/* grid-template-rows: repeat(3, 100px); */
grid-template-rows: repeat(3, 100px);
}
.grid-item {
background: #ccc;
margin-top: 10px;
}
.grid-item:not(:nth-child(3n+1)) {margin-left: 10px;}6. vw, vh 单位
视口百分比长度定义相对于 viewport 的大小的 <length> 值，即文档的可见部分。
vw: 视口宽度的 1 /100;
vh: 视口高度的 1 /100;
vmin: 视口高度和宽度之间的最小值的 1/100。
vmax: 视口高度和宽度之间的最大值的 1/100。
实现 3 行 3 列的示例：
<view class='page'>
<view class='header'>
<text>vw、vh 单位 </text>
</view>
<view class='content'>
<view class='wrapper'>
<view class='grid-item'>
<text>1</text>
</view>
<view class='grid-item'>
<text>2</text>
</view>
<view class='grid-item'>
<text>3</text>
</view>
<view class='grid-item'>
<text>4</text>
</view>
<view class='grid-item'>
<text>5</text>
</view>
<view class='grid-item'>
<text>6</text>
</view>
<view class='grid-item'>
<text>7</text>
</view>
<view class='grid-item'>
<text>8</text>
</view>
<view class='grid-item'>
<text>9</text>
</view>
</view>
</view>
</view>.page {padding: 5vw;}
.grid-item {
width: 28vw;
height: 28vw;
background: #ccc;
display: inline-block;
margin-bottom: 2vw;
}
.grid-item:not(:nth-child(3n+1)) {margin-left: 3vw;}在小程序中我们更多考虑的是移动设备显示的效果，不会涉及到媒体查询的使用。所谓的自适应是指在 page 中的元素在不同移动设备中的自适应。具体实现，可以使用微信小程序的 rpx 单位，以及使用定位、浮动、Flex、Grid 布局来实现。
总结
在这里我只是涉及到了各种布局的基本用法，其实每一种布局仔细研究起来都有很多需要讲解的东西，因为各种布局里面很多属性和特性都没有涉及到。在我们实际应用中也会有各种布局需求。所以希望大家在实际使用的时候在深入的进行了解。
另外，正如这篇文章的标题所述，css 布局在小程序的应用，我们在 h5 页面中的布局可以说各式各样，有不同的解决方案。这些布局概念一些是指某一类布局的概括，有一些是指 css 可以实现的布局方式。
那在小程序中一般使用默认的 rpx 单位来对布局、字体大小做定义。在以上的例子中都没有使用到微信的 rpx 单位，关于 rpx 的理解，可以参照小程序官方文档。rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。目的就是为了在不同的屏幕分辨率下做到自适应。
作者：易企秀——饭等米