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

[*千殇*]

开发工具与关键技术：DW,HTML5,Css3，Flex布局
作者：李明润
撰写时间：2019年1月16日
我们传统的页面布局的解决方案，大都是基于盒模型，是依赖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布局 还定义了许多属性供页面布局使用
容器的属性

项目的属性

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

[我不是老岑]

兄弟你发错贴了 你这个是提问的地方，，你去发博客才行，要不然你这个作业不算数，，记得20积分要结算给我 不用谢我，我是雷锋！！！

[*千殇*]

你想多了，我要两边都要发的，

[我不是老岑]

又是一个上课不听讲的学生，，去问一下你的老师吧！！记得20积分要结算给我

[*千殇*]

是吗，那就请你先问清楚，和看清楚，这积分给你了