|
   |
| Forum Wonder Study 寓教于乐 Wonder Effect js/as/css分享 CSS3中的Flexible Box布局 (Flexible Box in css3) |
| CSS3中的Flexible Box布局 |
Date Tu, 2013-12-31, 15:23 | Msg 1
 
Flexible Box从表现上看可以是浮动可以是块可以是表格可以是内联块各种，好处如下：
① 支持固定值，百分比混用，不需要精细考虑各种border, margin, padding ② 父级控制能力强大，统筹布局方式布局顺序等。 缺点： ① 不能同时包含两种布局方式 ② 类似table的BUG存在，比如子元素的内容可撑开子元素 使用： 步骤一：使父级变身为Flexible Box Code display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: box; /* NEW, Spec - Opera 12.1, Firefox 20+ */ 步骤二：给父级设置排列方式，包含—— box-orient: horizontal | vertical box-direction: normal | reverse box-align: start|end|center|baseline|stretch（子元素垂直对齐方式，向下继承） box-pack: start|end|center|baseline|stretch（子元素水平对齐方式，向下继承） 步骤三：给子元素设置自身属性，包含—— box-flex: value（介个值是相对的，比如设置为2的子元素是设置为1的子元素的两倍） box-ordinal-group: integer（父级box-direction正序排列时，介个整数大的排右边）  |
| |||
| |||
