Flex语法教程参考: 阮一峰blog
一、基本概念
在正式学习之前,要掌握一些基本概念
- 采用Flex布局的元素,称为容器
- 容器中的所有子元素自动成为容器成员,称为“项目”
- 容器默认存在两个轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)
- 轴开始的位置称为“main/cross start”,结束的位置叫做“main/cross end”
- 单个项目在轴上占据的空间叫做”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结构可以将布局难度降低一大截