Flex布局入门——实例（扑克牌）

Flex语法教程参考： 阮一峰blog

一、基本概念

在正式学习之前，要掌握一些基本概念

1. 采用Flex布局的元素，称为容器
2. 容器中的所有子元素自动成为容器成员，称为“项目”
3. 容器默认存在两个轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
4. 轴开始的位置称为“main/cross start”，结束的位置叫做“main/cross end”
5. 单个项目在轴上占据的空间叫做”main/cross size“

注意：

• flex容器不能作为绝对定位的参照物。想要添加定位元素的话，在容器外面包裹一层不设置宽高的inline-block元素
• 容器中的每一行&&每一列都存在一条轴线。每一个项目都处于轴线之上
• 轴的默认方向为从上到下，从左至右

二、示例

示例采用扑克牌的花色布局，花色（方片）通过iconfont矢量字体图标来实现
字体图标的使用参考： iconfont字体图标的使用

1、方片一

效果：

代码：

解析：
主要起作用的就是两个容器属性：
1. justify-content：center； ——定义项目在主轴上居中
2. align-items：center； ——定义项目在交叉轴上居中

2、方片二

效果：

代码：

解析：

• flex-direction：column； —— 以垂直方向为主轴。由于项目默认沿主轴排列，所以两个项目由水平排列改为垂直排列
• justify-content：space-around； —— 每根轴线的两侧的间隔都相等。两个方片之间的距离比方片与边框的距离大一倍

3、方片三

效果：

代码：

解析：
样式与方片二相同，只是增加了一个项目

4、方片四

效果：

代码：

解析：

• 方片四的实现重点在于html结构的构造
• 项目分为两行，每行又是一个容器
• flex容器可以嵌套
• .row中的主轴方向未改，仍是水平方向。原理与方片三类似

5、方片五

效果：

代码：

与前面的很类似，后面的也是。相同之处太多，就不继续写了。

三、总结

对于这种简单的flex布局，要记住几个重点

• 项目默认按照主轴方向排列。有时候改变主轴方向，布局可以更灵活
• flex容器可以嵌套。要合理安排html结构，一个合理的html结构可以将布局难度降低一大截