1 首先我们先去创建一个html：
<!DOCTYPE html>
<head>
<title>flex布局</title>
<!-- 这里介绍四种引入css的方式
1.元素内部直接引用: （行内样式）
2.在head标签中直接引入style标签
3.在网页创建时嵌入样式表
4.通过import导入样式
-->
<!-- 2.在head标签中直接引入: (链入外部样式表) -->
<link rel="stylesheet" type="text/css" herf="index.css">
<!-- 这里注意link标签的话不需要后标签 -->
<!-- 3.方式三 -->
<style>
#element-three {
height: 50px;
width: 50px;
background: pink;
}
</style>
</head>
<body>
<div>
<!-- 1.行内样式 -->
<div style="height: 50px;width: 50px;background: green;">元素一</div>
<div class="element-two">元素二</div>
<div id="element-three">元素三</div>
<!-- 方式四 -->
<div class="element-four">元素四</div>
</div>
</body>
<!-- 方式四 -->
<style>
@import "index.css";
</style>
</html> 上面我补充了一下我们常用的hmtl导入style的四种方式：
- 元素内部直接引用
- 通过link引入
- 在html文件创建的时候引入css样式称为内部样式表
- 通过style的标签在最后通过import进行导入
这里样式也分优先级，简单的记忆就是离我们元素标签越近的优先级越高：
元素内部直接引用 > 内部样式表 > link > import
2 这里我们来说一下link和import的区别：
1.兼容问题，link对于任何版本都是兼容的，import在css2.1提出，低版本的浏览器不支持
2.引入时间：link引入是在页面加载之前，import是在页面加载之后
3.对js的支持不同：link支持js去操作dom去控制样式，import不支持
4.引入内容不同：link可以引入样式文件/图片等资源，import只能引入样式资源
你会发现下面本来四个块级元素占四行。
在给共同的父级元素加上弹性布局的时候，四个块级元素会排一个块级元素所在的一行
要玩flex布局的话，肯定要对他里面的属性要清楚比如说
flex-direction
这里面属性对应的值有好几种
- 我们默认的为
row，row的话就是
- 它会在页面的最左边且排序方式从左往右为
1234如果我们的这个属性的值为row-reverse
- 它会在页面的最右边且排序方式从左往右为
4321它可以row，那么肯定想到还有column
- 它会在页面的最左边且排序方式从上往下
1234虽然这个我们看起来发现跟我们不使用弹性布局效果一样，但是他还是跟传统布局有所不同
- 对于传统布局我们发现如果上面的内容溢出，它会对下面元素造成影响
- 当我们使用了
flex布局之后，元素和元素之间是没有影响的，它不会因为上面元素高度不够而对下面元素造成影响
如果我们的这个属性的值为column-reverse
这四个元素的值会发现它从上往下的顺序为4321
下面还有几个重要的属性我们娓娓道来
3 flex-wrap
- 这个是控制元素换不换行的
刚开始我不知道这个换不换行是什么意思，后面玩了一下才知道，换不换行的意思是当你子元素中某一个子元素占满了一行，其它的子元素要么就在原来的这一行，填满的那一行就自动换行，然后如果后面还有子元素，后面的子元素会自动换行；
- 要么就是它自动换行。当然默认他是不会换行的，就算你把你其中一个子元素width拉到爆炸，还是不会对其他子元素造成影响，而且页面也不会被玩烂。
- 这个属性对应的值有
nowrap，wrap，wrap-reverse（这个的效果就是换行之后第一行会出现在下方）
4 justify-content
- 这个属性是控制这几个子元素出现在什么地方，
- 它对应的值有
flex-start(默认)，flex-end(右对齐)，center（居中），space-between（两端对齐，中间相同间距），space-around（两端也会有间距，所有子元素间距都相同）
5 align-items
- 这个属性是控制交叉轴的对齐的
- 它对应的属性有很多种：
flex-start（start就是他们的上边框对齐），flex-end（end就是他们的下边框对齐），center（就是中间有一个线对齐），baseline（项目的第一行文字对齐），stretch（如果项目未设置高度，会自动将高度设置为auto，将占满整个容器的高度）
6 align-items
- 是对一块内容的一个控制，但是我们可以通过
align-content对整个内容进行控制，相当于align-items只有一根控制交叉轴对齐的线，但是content可以包含多条。 - 对于
align-items的话也有很多属性值，flex-start（start就是上面对齐），flex-end（end就是下面对齐），center（中间对齐），space-between（两端对齐，中间间距相等），space-around（轴线的间距相等），stretch（就是让轴线的间距填满整个页面）
我们发现当我们的主轴为row或者column时他们的轴线是不一样的。
当是row时，轴线时垂直的；但是当flex-direction为column时，轴线是水平的。 对于一个一个items来说，他也有很多属性去控制。
比如说
7 order属性
对于order来说的话，数字越小，排列顺序越靠前，默认的值为0flex-grow属性，就比如说其中一个flex-grow属性为1时，另外一个为2，那么后面那个item会跟前面这个item以2:1的方式占据剩余空间。
8 flex-shrink属性
对于这个属性来说就是控制项目的缩小比例，默认为1，即空间不足的时候，项目会自动缩小。比如说现在有一个item为0，有个item为1，当项目缩小的时候前一个item是不会自动缩小的。这里有一个注意点就是负数对这个属性无效的。
9 align-self属性
这个属性控制的是某一个元素的对齐方式，意思就是当align-items为一种属性值的时候，我们可以为其中某一个特定的元素去设置它的对齐方式。不设置这个属性的话，它的值默认为auto，然后继承父元素align-items里面的元素值，如果没有父元素，默认值为stretch。
弹性布局不会去改变项目的宽度，但是会改变项目的高度。如果没有显式的高度，它默认会去占据整个项目的高度。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。