对于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布局 还定义了许多属性供页面布局使用

容器的属性

项目的属性

无论是容器属性还是项目属性，都提供了许多的属性值，供我们去调用，用与页面布局使用，