display:flex 多栏多列布局

作者：Jasmine - 2016年05月21日

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

display:flex 多栏多列布局浏览器支持情况：火狐直接支持w3c无前缀写法，谷歌和opera支持-webkit- 前缀写法，比较适合移动端开发使用，


display:flex 这个牛逼的css3布局属性，遗憾的是只有谷歌和火狐支持，

中国人常用的手机上的浏览器几乎全军覆没，UC浏览器不支持，安卓4.1.1和之前版本手机自带的浏览器也不支持，微信自带浏览器也不支持。

示例1:

<style type="text/css">
			.test_box {
				display: -moz-box;
				display: -webkit-box;
				display: box;
				width: 800px;
				margin: 40px auto;
				padding: 20px;
				background: #f0f3f9;
			}
			
			.list {
				padding: 0 1em;
				font: bold 36px/200px monaco;
				text-shadow: 1px 1px #eee;
			}
			
			.list_one {
				-moz-box-flex: 1;
				-webkit-box-flex: 1;
				box-flex: 1;
			}
			
			.list_two {
				-moz-box-flex: 2;
				-webkit-box-flex: 2;
				box-flex: 2;
			}
		</style>
<div class="test_box">
	<div class="list list_two" style="color: rgb(163, 53, 215); background-color: rgb(231, 126, 87);">1</div>
	<div class="list list_one" style="color: rgb(142, 166, 82); background-color: rgb(163, 239, 239);">2</div>
	<div class="list list_one" style="color: rgb(93, 41, 39); background-color: rgb(123, 148, 69);">3</div>
</div>

效果：

示例2:

.test_box2 {
				display: -moz-box;
				display: -webkit-box;
				display: box;
				width: 800px;
				margin: 40px auto;
				padding: 20px;
				background: #f0f3f9;
			}
			
			.test_box2 .list {
				padding: 0 1em;
				font: bold 36px/200px monaco;
				text-shadow: 1px 1px #eee;
			}
			
			.test_box2 .list_one {
				-moz-box-flex: 1;
				-webkit-box-flex: 1;
				box-flex: 1;
			}
			
			.test_box2 .list_two {
				-moz-box-flex: 2;
				-webkit-box-flex: 2;
				box-flex: 2;
			}
			
			.test_box2 .list_w300 {
				width: 300px;
			}

<!--第二-->
		<div class="test_box2">
			<div class="list list_two" style="color: rgb(81, 239, 166); background-color: rgb(171, 41, 17);">1</div>
			<div class="list list_one" style="color: rgb(54, 241, 225); background-color: rgb(57, 234, 83);">2</div>
			<div class="list list_w300" style="color: rgb(222, 50, 86); background-color: rgb(211, 72, 37);">3</div>
		</div>

效果：

box-orient：

box-orient用来确定子元素的方向。是横着排还是竖着走。可选的值有：

horizontal | vertical | inline-axis | block-axis | inherit

案例：

/*第三种*/
			.test_box3 {
				display: -moz-box;
				display: -webkit-box;
				display: box;
				padding: 20px;
				background: #f0f3f9;
				
				-moz-box-orient:horizontal; -webkit-box-orient:horizontal; -o-box-orient:horizontal; box-orient:horizontal; 
			}
			
			.test_box3 .list {
				padding: 0 1em;
				font: bold 36px/120px monaco;
				text-shadow: 1px 1px #eee;
			}

<div class="test_box3">
			<div class="list" style="color: rgb(114, 165, 186); background-color: rgb(35, 145, 77);">1</div>
			<div class="list" style="color: rgb(136, 198, 196); background-color: rgb(36, 19, 39);">2</div>
			<div class="list" style="color: rgb(74, 113, 137); background-color: rgb(3, 3, 63);">3</div>
		</div>

效果：

box-direction：

box-direction是用来确定子元素的排列顺序，可选值有：

normal | reverse | inherit

案例：

.test_box4 {
				display: -moz-box;
				display: -webkit-box;
				display: box;
				-moz-box-direction: reverse; //反序
				-webkit-box-direction: reverse;
				box-direction: reverse;
				width: 800px;
				margin: 40px auto;
				padding: 20px;
				background: #f0f3f9;
			}
			
			.test_box4 .list {
				padding: 0 1em;
				font: bold 36px/200px monaco;
				text-shadow: 1px 1px #eee;
			}
			
			.test_box4 .list_one {
				-moz-box-flex: 1;
				-webkit-box-flex: 1;
				box-flex: 1;
			}
			
			.test_box4 .list_two {
				-moz-box-flex: 2;
				-webkit-box-flex: 2;
				box-flex: 2;
			}

<div class="test_box4">
			<div class="list list_two" style="color: rgb(203, 234, 141); background-color: rgb(207, 113, 112);">1</div>
			<div class="list list_one" style="color: rgb(237, 251, 163); background-color: rgb(121, 173, 8);">2</div>
			<div class="list list_one" style="color: rgb(64, 95, 164); background-color: rgb(214, 89, 50);">3</div>
		</div>

效果：


box-align：

box-align与box-pack都是决定盒子内部剩余空间怎么使用的。在行为效果上就是表现为“对齐”，这跟Adobe的软件中的一些“对齐”是一致的，例如化妆大师photoshop中的图层-对齐。


其中box-align决定了垂直方向上的空间利用，也就是垂直方向上的对齐表现。为了便于记忆，我们可以拿来和CSS2中的vertical-align隐射记忆，两者都有”align”，都是都是垂直方向的对齐；而剩下的box-pack就是水平方向的了。


box的可选参数有：

start | end | center | baseline | stretch


其中stretch为默认值，为拉伸，也就是父标签高度过高，其孩子元素的高度就多高，//zxx:以后等高布局不用愁了。start表示顶边对齐，end为底部对齐，center为居中对齐，baseline表示基线（英文字母o,m,n等的底边位置线）对齐。


为了直观的知道各个值的效果，看案例：

.test_box5 {
				display: -moz-box;
				display: -webkit-box;
				display: -o-box;
				display: box;
				width: 400px;
				height: 250px;
				padding: 20px;
				background: #f0f3f9;
				
				-moz-box-align:stretch; -webkit-box-align:stretch; -o-box-align:stretch; box-align:stretch; 
			}
			
			.test_box5 .list {
				padding: 0 1em;
				font: bold 36px/120px monaco;
				text-shadow: 1px 1px #eee;
			}

<div class="test_box5">
			<div class="list" style="color: rgb(89, 36, 234); background-color: rgb(106, 8, 108);">1</div>
			<div class="list" style="line-height: 200px; color: rgb(232, 203, 160); background-color: rgb(72, 111, 26);">2</div>
			<div class="list" style="color: rgb(55, 96, 77); background-color: rgb(120, 14, 25);">3</div>
		</div>

效果：


box-pack：

box-pack决定了父标签水平遗留空间的使用，其可选值有：

start | end | center | justify

就大部分的行为表现来说分别对应text-align属性的值：left | right | center | justify；但是，之所以box-pack不使用”left”, 而是”start”，是因为box-direction属性，这玩意可以反转原本的排列，原本的“左对齐”反转后结果是“右对齐”了，此时”left”显然就词不达意了，所以使用”start”更具有概括性，就是与父标签的起始位置对齐，从而不会产生语义与行为上的困扰。其中”start”是box-pack属性的默认值，justify表示两端对齐。

貌似发现在Firefox浏览器下，justify是没有反应的，可能还未支持。Chrome浏览器表现良好。

案例：

.test_box6 {
				display: -moz-box;
				display: -webkit-box;
				display: -o-box;
				display: box;
				width: 500px;
				padding: 20px;
				background: #f0f3f9;
				
				-moz-box-pack:justify; -webkit-box-pack:justify; -o-box-pack:justify; box-pack:justify; 
			}
			
			.test_box6 .list {
				padding: 0 1em;
				font: bold 36px/120px monaco;
				text-shadow: 1px 1px #eee;
			}
			
<div class="test_box6">
			<div class="list" style="color: rgb(9, 70, 120); background-color: rgb(22, 109, 159);">1</div>
			<div class="list" style="color: rgb(99, 218, 160); background-color: rgb(98, 162, 74);">2</div>
			<div class="list" style="color: rgb(202, 84, 205); background-color: rgb(139, 91, 83);">3</div>
		</div>

效果：


box-lines：

box-lines是用来决定子元素是可以换行显示呢？还是就算挤出油还是单行显示。两个可选值：

single | multiple

其中single是默认值，表示死活不换行。设置box-lines:multiple后，就多行显示了。

.test_box7 { display: -moz-box; display: -webkit-box; display: -o-box; display: box; -moz-box-lines: multiple; -webkit-box-lines: multiple; -o-box-lines: multiple; box-lines: multiple; width: 400px; margin: 40px auto; padding: 20px; background: #f0f3f9; }
.test_box7 .list { padding: 0 2em; font: bold 36px/150px monaco; text-shadow: 1px 1px #eee; }

效果：

两个遗漏的属性

子元素除了box-flex属性，还有两个属性，box-flex-group和box-ordinal-group，其中box-flex-group的作用不详，貌似目前浏览器也不支持；box-ordinal-group的作用是拉帮结派。这个“拉拢”就是这里的box-ordinal-group。

数值越小，位置就越靠前，这不难理解，第一组在最前嘛，随后第二组，第三组… 例如：box-ordinal-group:1的组就会在box-ordinal-group:2的组前面显示。于是，我们可以利用这个属性改变子元素的顺序。例如下面这个例子：

HTML代码如下：

<div class="test_box">
    <div class="list list_two">1</div>
    <div class="list list_one">2</div>
    <div class="list list_one">3</div></div>

相关CSS如下：

.test_box { display: -moz-box; display: -webkit-box; display: box; width: 800px; margin: 40px auto; padding: 20px; background: #f0f3f9; }
.list { padding: 0 1em; font: bold 36px/200px monaco; text-shadow: 1px 1px #eee; }
.list_one { -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; -moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; box-ordinal-group: 1; }
.list_two { -moz-box-flex: 2; -webkit-box-flex: 2; box-flex: 2; -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; box-ordinal-group: 2; }

结果后面两个class为”list_one”的元素跑到前面去了。效果：


来源于： http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex%E5%B1%9E%E6%80%A7%EF%BC%8C%E7%84%B6%E5%90%8E%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E7%AE%80%E4%BB%8B

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/426

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！

3587 2016-05-21 13:59:43
 请勿发布不友善或者负能量的内容。审查将对发布广告等违规信息进行处罚！