css3流式布局

浏览数：39 / 时间：2015年06月09日

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;}

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;}