css3流式布局

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

  

css3流式布局,布布扣,bubuko.com