box-flex等分总结
首先要知道在应用 box-flex 时必须给父容器定义 css 属性 display:box
其子容器才可以进行划分。
.box{ display: -webkit-box; display: -moz-box; display:box; }
.sbox1 {
-moz-box-flex:3;
-webkit-box-flex:3;
box-flex:3;
}
.sbox2 {
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
}
.sbox3 {
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
由于三个子容器 sbox1-3 共同将父容器 box 分成了 3+2+1=6 份以横向排列。这里需要知道,这6份是依据父级容器 box 所剩 “自由空间” 来进行分配。如果将其中 sbox3 宽度给予实数 width:600px;
并去掉 box-flex
属性,那么 box 会先减去 sbox3 实数宽度后再给 sbox1 sbox2 划分。
默认情况是横向划分,如果要纵向划分那么需要给父级容器再添加样式 box-orient:vertical
.box { -moz-box-orient:vertical; -webkit-box-orient:vertical; box-orient:vertical; }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步