<!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>
</head>
<body>
<!---
flex容器和项目
1. 容器(container)
2. 项目(item)
采用 flex 布局的元素，称为 flex 容器（flex container），简称：容器
它的所有子元素自动成为容器成员，称为 flex 项目（flex item），简称：项目
flex主轴和交叉轴
容器默认存在两根轴：
1. 水平的主轴（main axis）
2. 垂直的交叉轴（cross axis）
后续排列的方式就是沿着主轴还是交叉轴方向
flex三类样式设置
flex的样式设置包含下面三类：
1. 1个关键定义：容器display设置为flex
2. 6个项目属性：设置在项目上的属性。
3. 6个容器属性：设置在容器上的属性。
1）1个关键定义
很简单，就是容器样式 display 设置为 flex 即可，表示html元素使用flex容器布局
2）6个项目属性
flex-basis
flex-grow
flex-shrink
flex
align-self
order
3）6个容器属性
flex-direction
justify-content
align-items
flex-wrap
align-content
flex-flow
-->
</body>
</html>
