今天我们来初步学习flex布局初步知识，并且用示例来解释一些基本的功能。
HTML代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../common/reset.css">
<link rel="stylesheet" href="./css/style.css">
<title>flexbox example1</title>
</head>
<body>
<div class="container">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
</body>
</html>CSS部分
.container {
/** 我们使用 display: flex 将container元素声明为 flex 容器。
* 现在，所有该 flex 容器的 in-flow 子项都自动成为 flex 项，因此使用 flex 布局模型进行布局。
*/
display:flex;
}
.red {
background: orangered;
/** 红色的框占据剩余的所有空间
* 红色的 flex 项比其他两个更宽。这是因为我们将 flex-grow: 1 应用于该项目。
* flex-grow 属性设置弹性项目的增长因子，它决定了弹性项目相对于其他弹性项目将增长多少（在分配任何正的可用空间之后）。
* 初始值为零，因此其他两个项目的增长因子为零（因为我们没有在这些项目上使用 flex-grow 属性）。
* 这会导致红色弹性项目根据需要增长以占用可用空间。另外两个项目通过缩小直到它们刚好适合它们的内容而不是更多。
*/
flex-grow: 1;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
width: 40vw;
}
.container > div {
/** 这里的字体大小是相对于视口的大小*/
font-size: 5vw;
/** em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸*/
padding: .5em;
color: white;
}最后的结果
总结：
1、flex布局是一维布局，因此，将容器container设置为flex后,剩下的就是处理子元素的
2、这里用了一个技巧，blue框的宽度设置为40vw，而green框设置为自适应，最后red框占据剩下的所有空间。
3、还有一点就是字体会随着视口的大小变化，这个需要根据具体情况来定。
