关于弹性布局

　　第二天了，喵爷大人让我写一个小页面来练练手，就是在这个页面里面，弹性布局这个方法我才是正式的使用的，之前，我虽然知道有弹性布局这个东西，但是我一直都没有使用过，仅仅是听说过而已，喵爷和我说，这里用弹性布局会比较容易一点，我才上网去看了一下关于弹性布局的，第一次使用，始终不是非常的习惯，所以，总是习惯性的避免使用它，造成了，布局细节方面出现挺多的错误的。。。这都是不习惯的后果啊~~~晚上我专程的用大概一个小时的时间，去看了一下关于弹性布局这方面的知识，现在来分享一下，我个人理解的弹性布局~~~

　　因为在公司了，我就间接性的掺一些对公司里面写好的样式，大家忽略就可以了~~~~~

首先呢 在使用弹性布局的时候，我们应该讲父元素定义成弹性布局：display:box;

因为兼容性问题，一般都是要写一大堆的 

display: -webkit-box;　　//兼容谷歌 和safari
display: -moz-box;　　　//这个是为了兼容火狐
display: -ms-box;　　　//这个是为了兼容ie
display: -o-box;　　　　//这个是为了兼容欧朋
display: box;　

公司里面的rest样式已经兼容好了，只需要我们用box这个类给父元素就可以了

下面的理解一下就行

这里弹性布局似乎会引发一个问题，不过我还没有遇到过，百度之后他们说的问题就是：弹性布局，布局的是centent部分的，然后padding和border会造成一定的问题，

在这里，讲一下题外的东西，大家都应该知道w3c的盒模型和IE的盒模型，虽然都是有centent和padding 和border加上margin构成的，但是有一个东西不一样，就是ie浏览器的盒模型的centent是包括border和padding的，但是w3c的是不包括的

所以 在使用盒模型的时候，加上一个样式 就是 

box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;

这样 ，就讲w3c的盒模型和ie盒模型看齐了，它的意思就是，w3c的盒模型，它的centent包括border和padding了 

在公司里面 直接加上box-sizing这个类给父元素就可以了，不用那么的麻烦~~

在父元素里面有这么一些属性 它可以决定

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　子元素的分布在哪个位置

	start	靠左
box-pack	end	靠右
	center	在中间
	justify	间距平均

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　子元素的渲染排列

boxdirection	inline-axis	横向排列
	block-axis	竖向排列

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　子元素的排列顺序

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　注：正常是123 倒序就变成321了

box-diretion	normal	默认的，正常排列
	reverse	倒序

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　子元素的对齐方式，在子元素高度不一样的时候有用

	stretch	(默认的)将子元素拉伸
	start	顶部对齐
box-align	end	底部对齐
	center	居中对齐
	baseline	基线对齐

写了那么多父元素的  现在就写一下子元素的东西吧，子元素的东西不怎么的多，比较重要的一个就是

box-flex:常量 这个属性也要兼容的

这个子元素的属性是什么意思呢，就是把父元素的空间平均分成多少份（常量的总和），然后哪个常量的值就是占有多少份的意思

下面这个子元素的属性是用来控制子元素的排列顺序的 我们可以改变它的值来改变它的位置

box-ordimal-group:常量

哪个常量的值越小，排列的顺序越靠前，