css3布局方式:
- 不推荐使用
float
,有时候使用浮动的时候,对于可适应的流氏布局,无法胜任。 推荐使用css3的display:webkit-box
。
使用的html代码
<div class="warp"> <div class="one"> </div> <div class="two"></div> <div class="three"></div> </div>
box-flex属性
- box-flex主要让子容器针对父容器的宽度按一定规则进行划分
- 最重要的一个特性是:如果子元素中有固定的宽度,其他没有设置宽度的则在 父元素的基础上减去子元素的宽度,再按照比例划分。
css代码
.warp{display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;} .one{height:80px;width:80px;background:#FFA600;} .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;} .three{height:80px;width:80px;background:#028002;}
box-orient属性
用来确定父容器里子容器的排列方式,是
水平
还是垂直
;水平排列 box-orient:horizontal
css代码
.warp{-webkit-box-orient: horizontal;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;} .one{height:80px;width:80px;background:#FFA600;} .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;} .three{height:80px;width:80px;background:#028002;}
垂直排列 box-orient:vertical
css代码
.warp{-webkit-box-orient: vertical;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;} .one{height:80px;width:80px;background:#FFA600;} .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;} .three{height:80px;width:80px;background:#028002;}
box-align属性
box-align表示父容器里面子容器的垂直对齐方式,可选参数如下所示: start | end | center | baseline | stretch。
居顶对齐 start
css代码
.warp{-webkit-box-align: start;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;} .one{height:80px;width:80px;background:#FFA600;} .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;} .three{height:80px;width:80px;background:#028002;}
垂直排列 end
css代码
.warp{-webkit-box-align: end;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;} .one{height:80px;width:80px;background:#FFA600;} .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;} .three{height:80px;width:80px;background:#028002;}
垂直排列 center
css代码
.warp{-webkit-box-align: center;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;} .one{height:80px;width:80px;background:#FFA600;} .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;} .three{height:80px;width:80px;background:#028002;}
- 垂直排列 stretch
css代码
.warp{-webkit-box-align: stretch;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;} .one{width:80px;background:#FFA600;} .two{-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;} .three{width:80px;background:#028002;}
但是需要注意的是:如果子元素的高度已经设置啦
height:20px
就不会自动的拉伸。
box-pack属性
box-pack表示父容器里面子容器的水平对齐方式,可选参数如下所示: start | end | center | justify
- 水平居左对齐 start
css代码
.warp{-webkit-box-pack: start;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;} .one{height:80px;width:80px;background:#FFA600;} .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;} .three{height:80px;width:80px;background:#028002;}
- 水平居左对齐 start
box-pack表示水平居右对齐 end
css代码
.warp{-webkit-box-pack: end;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;} .one{height:80px;width:80px;background:#FFA600;} .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;} .three{height:80px;width:80px;background:#028002;}
box-pack 表示水平居中对齐 center
css代码
.warp{-webkit-box-pack: center;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;} .one{height:80px;width:80px;background:#FFA600;} .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;} .three{height:80px;width:80px;background:#028002;}
box-pack 表示水平居中对齐 justify
css代码
.warp{-webkit-box-pack: justify;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;} .one{height:80px;width:80px;background:#FFA600;} .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;} .three{height:80px;width:80px;background:#028002;}