CSS3 弹性盒模型

弹性盒模型

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

box-flex属性, 指定box的子元素是否灵活或固定的大小。

参考代码:

// 父节点,可以任意分配子元素的空间
.test_box {
    display: -moz-box; 
    display: -webkit-box; 
    display: box; 

    ...
}

.list {
   ...
}

.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;
}

【注意】 当子元素中有宽度值的时候,此元素就定宽处理,剩下的空间再按比例分配。

有一次就是忘记设了宽度了,结果怎么调都没有用,原来子元素已经设置了宽度。

父节点中的属性配置

弹性盒子模型下(父标签)其实是很有决定作用的:box-orient, box-direction, box-align, box-pack, box-lines. 能够决定子元素的方向

box-orient

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

horizontal | vertical | inline-axis | block-axis | inherit
其中,inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的,让子元素横排;而vertical与block-axis的表现也是一致的,让元素纵列。

box-direction

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

normal | reverse | inherit
其中normal是默认值,表示按照正常顺序排列。所谓正常顺序,就是我们看书写文字的顺序,从左往右,由上至下,先出现的元素,就上面或是左边。而reverse表示反转,原本从左往右应该是1-2-3的,结果显示确实3-2-1。

box-align

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

box-align

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

box-pack

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

start | end | center | justify

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

参考资料

CSS box-flex属性,然后弹性盒子模型简介
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/

Flex 布局教程:语法篇
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值