对于HTML5中Flex布局的基础使用

咱们传统的页面布局的解决方案，大都是基于盒模型，是依赖display属性 + position 属性 + float 属性来实现的，其对于一些特殊的布局是很不方便的。
接下来咱们学习一种新的布局 Flex 布局 又称为“弹性布局”。
下面咱们先使用div 元素来布局页面 ，由于div元素为块级元素，在默认的状况下是占据一行。
先布局一下

布局效果

咱们先用position实现div居中显示

position效果

接下来加入Flex看看

加入Flex后的效果

咱们能够看到使用position定位和flex布局均可以实现div居中显示，并且效果同样
但使用前者代码多，后者代码少
若是使用传统的布局方式，代码是比较多的，比较复杂的，而Flex 布局则比传统布局更灵活，更方便。
对于Flex布局咱们又称之为“弹性布局”。
咱们对于采用Flex布局的元素，称为Flex容器，简称“容器”，而元素的子元素称为Flex 项目，简称“项目”，“容器“中存在两根轴，水平的主轴（main axis）和垂直的交叉轴（cross axis），轴开始位置的
关键词为 start，结束的关键词为 end。

Flex布局 还定义了许多属性供页面布局使用

容器的属性

项目的属性

不管是容器属性仍是项目属性，都提供了许多的属性值，供咱们去调用，用与页面布局使用，