Flex 是 W3C 提出的一种新的布局方案，可以非常方便的完成响应式页面布局，到目前为止几乎所有浏览器都支持，Flex 是 Flexible Box 的缩写，翻译过来是"弹性布局"的意思，下面一起来学习 Flex 布局的使用。
基础概念
采用 Flex 布局的元素称为 Flex 容器，所有子元素将自动成为容器成员，也可以称之为 Flex 项目，也就是该 Flex 布局的子 View,下面是 Flex 布局默认设置下的示意图：
如上图所示，默认的 Flex 容器的存在两个轴：水平的主轴(main axis)和垂直的交叉轴(cross axis)，主轴和交叉轴的方向不是绝对的，而是会因为设置的不同而不同，下面是与主轴和交叉轴相关的几个位置：
- 主轴起始点(main start):主轴的开始位置
- 主轴的结束点(main end):主轴的结束位置
- 主轴空间(main size):单个 Flex 项目占据的主轴空间
- 交叉轴的起始点(cross start):交叉轴的起始点
- 交叉轴的结束点(cross end):交叉轴的结束点
- 交叉轴空间(cross size):单个 Flex 项目占据的交叉轴空间
flex容器属性
- flex-direction：设置主轴的方向，可设置的值如下：
- row：默认值，设置主轴为水平方方向，起点在左边
- row-revarse：设置主轴为水平方向，起点在右边
- column：设置主轴为垂直方向，起点在上边
- column-revarse：设置主轴为垂直方向，起点在下边
flex-wrap：设置如何换行，可设置的值如下： |
| Nowrap | wap | wrap-revarse |
|---|---|---|
|
|
|
-
flex-flow：flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row Nowrap。
-
justify-content：设置项目在主轴上的对齐方式，可设置的值如下：
- flex-start：默认值，左对齐
- flex-end：右对齐
- center：居中对齐
- space-between：两端对齐
- space-around：每个项目两侧的间隔相等，与屏幕边缘的间隔是其他项目之间间隔的一半
- space-evenly：平均分布各个项目，与屏幕边缘的间隔与其他项目之间的间隔相等
| flex-start | flex-end | center | space-between | space-around | space-evenly |
|---|---|---|---|---|---|
|
|
|
|
|
|
- align-items：设置项目在交叉轴上如何对齐，可设置的值如下：:默认值，如果没有项目未指定高度或设置为auto,则项目会占满整个容器的高度，可设置的值如下：
- stretch：默认值，如果没有项目未指定高度或设置为auto,则项目会占满整个容器的高度，下面图示中项目 1 就未指定高度，其余项目都指定了高度 就未指定高度
- flex-start：设置与交叉轴的起点对齐
- flex-end：设置与交叉轴的结束点对齐
- center：设置与交叉轴的重点对齐
- baseline：设置项目与项目中第一行文字基线对齐
| stretch | flex-start | flex-end | center | baseline |
|---|---|---|---|---|
|
|
|
|
|
- stretch：默认值，轴线占满整个交叉轴
- flex-start：设置与与交叉轴的起点对齐
- flex-end：设置与交叉轴的终点对齐
- center：设置与交叉轴的中点对齐
- space-between：设置与交叉轴两端对齐，轴线之间的间隔平均分布
- space-around：设置每根轴线两侧的间隔都相等，轴线与轴线的间隔是轴线到交叉轴边缘间隔的两倍
| stretch | |||||
|---|---|---|---|---|---|
|
-
order：默认值为0，设置项目的排列顺序，数值越小，排列越靠前，如下图所示：
- flex-grow：设置项目的放大比例，默认值为0，如果存在剩余空间也不放大，如下图所示：
| flow-grow=0 | flow-grow=1 | flow-grow设置不同值 |
|---|---|---|
|
|
|
- flex-shrink：设置项目的缩小比例，默认值为 1，如果项目空间不足，则项目将缩小，如下图所示：
| flow-shrink=1 | flow-shrink=0 | flow-shrink设置不同值 |
|---|---|---|
|
|
|
上面图示中，当 flex-shrink 全设置为 0，每个项目不会缩放，所以第四个方块被挤出去了，而相应的设置 flex-shrink 为 1，则可以在空间不足是进行一定程度的缩放。
- flex-basis：项目所占的主轴空间，如下图所示：
| auto | stretch | flex-start | flex-end | center | baseline |
|---|---|---|---|---|---|
|
|
|
|
|
|
上面的效果中设置 auto 会跟随 flex 容器中 align-items 的设置。
总结
最近尝试了一下微信小程序，感觉开发起来难度也不是很大，觉得本篇文章的内容也是微信小程序中最重要的内容了，本来打算继续进行小程序系列的学习，但是看了一下后面的内容无非就是小程序各个组件的使用了，如果有其他项目的开发经验，实在没必要一个组件一个组件去验证学习，所以小程序的学习就到此为止，最后，说一点微信小程序最重要的我觉得还是 Flex 布局。可以选择关注个人微信公众号：jzman-blog 获取最新更新，一起交流学习!
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
