CSS
(61)flex 布局一行 N 个子元素的实现
例如，我想在微信小程序首页显示多个功能按钮，采用 flex 布局，一行3个按钮。每个按钮之间等间距。
效果如图所示：
![flex 布局一行 N 个子元素的实现](https://cdn.sunzhongwei.com/sunz
微信小程序 scroll view 占据页面剩余高度
假设页面
- 顶部是一个 banner，class 为 top
- 余下部分是一个 scroll view，占据了页面剩余的高度
## 实现方法
```
Page {
display: flex;
height
ul 子元素过多时，显示水平滚动条
当手机端排版时，如果 ul 中 li 过多，一行装不下时，希望显示水平滚动条，而不是折行。
flex 实现：
## ul
```
display: flex;
overflow-x: auto;
```
## li
CSS 实现 DIV 弧形底部
见过两种实现方式，但是只有第一种的效果更平滑。
以微信小程序模板代码为例：
```
```
## 第一种，两个 div 拼接
实现的逻辑是，利用 after 创建一个相对大的底部圆形的 view，露出下面的部分
flex 布局实现垂直居中和水平居中
在微信小程序中可以放心地使用 flex 布局，所以尝试了一下 flex 的居中布局。
## 示例模板代码
```
手机认证
```
## 示例样式代码
只需要在父级元素上设置，不需要操作子元素
flex 水平分割布局
例如，我在微信小程序中想使用 flex 布局来实现如下的一行布局：
```
| 功能图标 | 功能名称 | 引导箭头|
```
即，水平分割一行。
## 实现效果
![flex 水平分割布局](https://cdn
CSS 覆盖 inline style 样式
## 内联非 !important 样式
```
```
## 内联 !important 样式
由于内联 !important 样式不可覆盖，所以只能使用 js 替换的方式来解决。
```
``
Hover DIV 区域，背景图片拉近放大显示效果
在商品图片列表页，想增加一个交互效果。
当鼠标 Hover DIV 区域，背景图片拉近放大显示。
## HTML
```
CSS 实现自适应的正方形 DIV
## 使用场景
例如，一行显示四张图片，这样每张图片都占屏幕宽度的 25%。
但是纯 CSS 如何实现高度如何跟宽度保持一致，构成一个正方形 DIV 呢？
## 方法一
```
.square {
width:
Flex 布局
Flex，全称为 Flexible Box，即“弹性布局”。
## 浏览器兼容性
IE 10 才支持。
## 传统布局的局限性
垂直居中不容易实现。
## 基本使用
指定为 Flex 布局：
- 行内元素: d