layout flex 弹性布局 1a

放心使用flex 2009年起草 至今 所有主流浏览器已经全面支持

先明确两个概念 容器和项目

• 容器&项目 所谓容器和项目，既某个元素具备display:flex;属性，改元素就是容器。而改元素下的所有子元素，被称为项目。
• 特性
  1. 容器所有子元素的 clear flot verticall-align 属性失效。

容器的主轴和交叉轴

• 所谓主轴 就是容器的横向坐标轴，可以这么理解的。
• 所谓交叉轴 自然就是容器的纵向坐标轴

实操上手 -xa

<div class="flex-box">
	<div class="item-div">我是项目1-div</div>
	<a href="">我是项目2-div</a>
	<p>我是项目3-p</p>
	<img src="http://www.mds.573.png" alt="我是项目4-img">
	<span class="item-span">我是项目5-span</span>
</div>

.flex-box{
	display: flex;
	display: -webkit-flex;
	/*上述属性的加入，就让div变成了弹性布局的容器，而此div下的所有子元素，都成为容器div的项目*/
	/*
		紧跟着在div.flex-box 下边创建 div span p a img子元素 
		此时我们发现了神奇的问题，行标签快标签的界限消失了。容器的最大高度，变成了某个项目的最大高度。
	*/
}
.item-div{
	float: right: /*无效*/
    verticall-align: top; /*无效*/
}

.item-span{
	width: 100px;
	height: 100px;

	/*更神奇的事情发生了，span不需要设置display:line-block; 竟然也能设置宽高？ 我……想静静*/
    /*what！！！ 其他项目 自动跟着 span等高了…… */
}
.item-div{
	/*我决定给项目div加一个 高度大于span 那么span 会跟着增高么？*/
	height: 200px;

	/*result
		设置了span 的并没有 ……
		由此可见： 容器的最大高度，是某个项目的最大高度，而未设置高度的项目乖乖跟随这个高度。由此类推其它元素是否也是这样呢？
	*/
}

实操上手 -xb

下回分解……