首页 > 代码库 > 弹性盒子
弹性盒子
最近 看了一些弹性盒子布局的文档 总结如下
弹性盒子布局
1 第一种 平均分配
CSS
*{
margin: 0;
padding: 0;
}
.flexContainer{
display: flex;
display: -webkit-flex;
width: 400px;
height: 250px;
background: red;
}
.flexItem{
width: 300px;
height: 100px;
margin: 10px;
background: green;
}
html
<body>
<div class="flexContainer">
<div class="flexItem"></div>
<div class="flexItem"></div>
<div class="flexItem"></div>
</div>
</body>
2比例分配
.test_box{
display: -moz-box;
display: -webkit-box;
display: box;
width: 400px;
height: 250px;
background: red;
}
.list{
margin: 10px;
}
.list_one{
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex:1;
background: green;
}
.list_two{
-moz-box-flex: 2;
-webkit-box-flex: 2;
box-flex:2;
background: yellow;
}
//
<body>
<div class="test_box">
<div class="list list_two">1</div>
<div class="list list_one">2</div>
<div class="list list_one">3</div>
</div>
3 先分配具体的宽度（500） 再把父级DIV剩下的宽度来平均分派
.test_box{
display: -moz-box;
display: -webkit-box;
display: box;
width: 1000px;
height: 250px;
background: red;
}
.list{
margin: 10px;
}
.list_one{
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex:1;
background: green;
}
.list_two{
-moz-box-flex: 2;
-webkit-box-flex: 2;
box-flex:2;
background: yellow;
}
//新增实际宽度
.listW500{
width: 500px;
background: black;
}
//
<body>
<div class="test_box">
<div class="list list_two">1</div>
<div class="list list_one">2</div>
<div class="list listW500">3</div>
</div>
4 父级元素 box-orient 属性
box-orient用来确定子元素的方向。是横着排还是竖着排列 可选的值有：
horizontal | vertical | inline-axis | block-axis | inherit（默认）
5 父级元素 box-direction
box-direction是子来确定字元素的排列顺序，可选值有：
normal | reverse | inherit（默认）
6 父级元素 box-align
box-align与box-pack都是决定盒子内部剩余空间怎么使用的
start | end | center | baseline | stretch（默认）
7 box-pack
box-pack决定了父标签水平遗留空间的使用 其可选值有：
start（默认） | end | center | justify
8 box-lines
box-lines是用来决定子元素是否可以换行显示呢？两个可选值：
single | multiple
其中single是默认值，表示不换行
后面的代码太多重复的就不一一显示了 真的很好用的 弹性盒子
弹性盒子