css3流式布局

標籤：style   http   color   使用   width   os   

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

• 垂直排列 stretchcss代碼

    .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

  • 水平居靠左對齊 startcss代碼

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