flex布局初步—

今天我们来初步学习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、还有一点就是字体会随着视口的大小变化，这个需要根据具体情况来定。

flex布局初步——(一)

HTML代码部分

CSS部分

最后的结果

总结：

意见和建议