display:
发布时间:2015-06-27 00:00:05
Flexbox 为 display 属性赋予了一个新的值(即 box 值), flexbox的属性有很多,记录一些比较常用的属性:用于父元素的样式:display: box; 该属性会将此元素及其直系子代加入弹性框模型中。(Flexbox 模型只适用于直系子代)box-orien ...
Flexbox 为 display 属性赋予了一个新的值(即 box 值), flexbox的属性有很多,记录一些比较常用的属性:
display: box; 该属性会
将此元素及其直系子代加入弹性框模型中。(Flexbox 模型只适用于直系子代)box-orient:
horizontal
| vertical
| inherit;
该属性定义父元素
的子元素是如何排列的。box-pack:
start
| end
| center
| justify;
设置沿 box-orient
轴的父元素中子元素的排列方式。因此,如果 box-orient
是水平方向,则父元素的子元素是水平的排列方式,反之亦然。(表示父容器里面子容器的水平对齐方式--垂直排列时--定宽)box-align:
start
| end
| center
| baseline
| stretch;
基本上而言是 box-pack
的同级属性。设置框的子代在框中的排列方式。如果方向是水平的,该属性就会决定垂直排列,反之亦然。(表示父容器里面子容器的垂直对齐方式--水平排列时--定高)
- box-flex: 0 | 任意数字; 该属性让子容器针对父容器的宽度按一定规则进行划分。
1 <style> 2 *{ 3 margin: 0; 4 padding: 0; 5 } 6 .parent{ 7 width: 500px; 8 height: 200px; 9 display: -webkit-box;10 -webkit-box-orient: horizontal;/* 虽然默认的排列方式是水平的,但是为了区分起见,加上该属性 */11 }12 .child-one{13 background: lightblue;14 -webkit-box-flex: 1;15 }16 .child-two{17 background: lightgray;18 -webkit-box-flex: 2;19 }20 .child-three{21 background: lightgreen;22 -webkit-box-flex: 3;23 }24 </style>25 26 <div >27 <div >28 <div >1</div>29 <div >2</div>30 <div >3</div>31 </div>32 </div>
原标题:display:
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。
朱明浩:https://www.ikjzd.com/w/1690
杜瑞鹏:https://www.ikjzd.com/w/1691
张翔宇:https://www.ikjzd.com/w/1692
美森:https://www.ikjzd.com/w/1693
亚马逊品牌备案:https://www.ikjzd.com/w/1694
海蜜严选_全球购物app:https://www.ikjzd.com/w/1695
黄鹤楼门票:https://www.vstour.cn/a/362174.html
求帮忙!昆明-河口路线上的云南特产!不要详细:https://www.vstour.cn/a/362175.html