• Page 1 of 1
  • 1
CSS3中的Flexible Box布局
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正序排列时,介个整数大的排右边)
TIP:封印子元素的内容可撑开子元素BUG可给子元素设置width: 1px
  • Page 1 of 1
  • 1
Search: