display:box; 弹性盒子模型

最新推荐文章于 2024-10-06 02:05:37 发布

转载最新推荐文章于 2024-10-06 02:05:37 发布 · 57 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dragonlong/p/4648290.html

本文深入探讨了CSS布局中的box模型、flex布局、grid布局等核心概念，并详细解释了box-orient、box-direction、box-align、box-pack、box-line等关键属性的作用，帮助开发者更好地理解和应用这些布局技巧。

.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-orient:horizontal|vertical|inline-axis|block-axis|inherit
inline-axis:默认
horizontal/inline-axis:让子元素横排
vertical/block-axis:让子元素竖排
inherit:继承

box-direction:用来确定子元素的排列顺序
normal|reverse|inherit
normal:默认，按照正常顺序
reverse:反转顺序

box-align 垂直方向对齐
box-align:start|end|center|baseline|stretch
stretch:默认值，为拉伸，也就是父标签高度多高，其孩子元素的高度就多高
start:顶边对齐
end:底部对齐
center:居中对齐
baseline:基线对齐（英文字母o,m,n等的底边位置线）

box-pack 水平方向
box-pack:start|end|center|justify
start:默认，与父标签的起始位置对齐(相当于子元素float：left;但前提是没有设置反转box-direction:reverse)
end:与父标签的结尾位置对齐
center:居中
justify:两端对齐

box-line 用来决定子元素是否可以换行显示
box-line:single|multiple
single:默认，不换行
multiple:多行显示（Firefox和chrome暂时不支持）

box-ordinal-group 决定子元素的位置，数值越小，位置越靠前

转载于:https://www.cnblogs.com/dragonlong/p/4648290.html