演示动图来源：GitHub
一. 什么是flex布局
是一种专门的CSS一维(水平/垂直)布局方案
- 位置(定性)
- 大小(定量)
怎么研究位置和大小
借助坐标系(平面直角坐标系)
- 水平轴: 主轴
- 垂直轴: 交叉轴
二. 区分flex容器和flex项目
1) 什么是flex容器
启用flex布局方案的元素
2) 如何产生flex容器
通过设置display: flex属性, 让一个元素变成flex容器
3) 什么是flex项目
容器中的第一层子元素就是flex项目(item)
示例
<!--
如果ul是flex容器的话, 3个li元素就是flex项目
如果第一个li元素是flex容器的话, 1 和 a元素就是flex项目
-->
<ul>
<li>1 <a href="#">111</a></li>
<li>2</li>
<li>3</li>
</ul>
三. flex容器属性
flex容器控制
- 轴(主轴/交互轴)
- 项目的排序方式
- 项目的排序顺序
- 项目的位置
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 1. 确定flex容器, 根据flex容器确定flex项目 */
.father {
/* 设置flex容器, 确定了两个轴(主轴水平/交叉轴垂直) */
/* 元素默认在主轴上排列 */
display: flex;
width: 400px;
height: 400px;
background-color: pink;
}
.one {
width: 100px;
height: 100px;
background-color: skyblue;
}
.two {
width: 100px;
height: 100px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="father">
<div class="one"></div>
<div class="two"></div>
</div>
</body>
</html>
- 设置flex容器, 确定了主轴(默认是水平)
- flex项目沿主轴排列
1 flex-direction
确定主轴方向
- row(默认值): 水平方向, 从左到右
- column: 垂直方向, 从上到下
- row-reverse: 水平方向, 从右到左
- column: 垂直方向, 从下到上
2 flex-wrap
控制是否换行
当主轴空间不够时, 如何处理
- nowrap(默认值): 不换行
- wrap: 换行
3 主轴的分布
控制主轴上flex项目的排列方式
通过控制剩余空间
justify-content(重点)
- flex-start(默认值): 从左到右依次排列
- flex-end: 从右到左排列
- center: 居中排列
- space-between: 贴边对齐
- space-around: 手拉手对齐
- space-evenly: 均分对齐
4 交叉轴的分布
控制交叉轴上flex项目的排列方式
align-items(重点)
- flex-start:
- flex-end:
- center:
- stretch:
- baseline:
看看后两个，其中每个 div 中的数字都包含在一个 p 标签中
align-items: stretch 时每个 div 都会充满交叉轴
align-items: baseline 时按照 p 标签的底部对齐
注意：align-items: stretch 时每个 div 的 height 必须为 auto 否则 height 属性会覆盖 stretch 的效果
align-items: baseline 时如果 div 内没有 p 标签或者 div 内没有文字或者子标签内没有文字将按照每个 div 的底部对齐。如下：
4 主轴和交叉轴的区别
进一步理解主轴和交叉轴的区别，把 justify-content 和 align-items 合在一起，看看在 flex-direction 两种值下的效果
flex-direction: row 时每个 div 按照水平主轴排列
flex-direction: column时每个 div 按照垂直主轴向下排列
四. flex项目属性
flex项目属性(定量关系)
确定每个项目的大小
flex是一个简写, 由3个属性组成
- flex-grow: 扩张(按比例扩张)
- flex-shrink: 收缩(按比例收缩)
- flex-basis: 主轴初始空间
flex默认值
- flex-grow: 0 (不扩张)
- flex-shrink: 1(收缩)
- flex-basis: auto(自动计算)
示例
/* 1 1 auto(开启扩张, 均分剩余空间) */
flex: 1;
五. 注意事项
1 不设置宽高
不设置高度: height默认值是auto(占满整个交叉轴)
不设置宽度: width默认值是auto(由内容撑开)
2 如何确定占据主轴空间的初始值
初始值计算优先值
- flex-basis > width > 内容撑开