-webkit-box自适应布局用法

Flexible Box Model(灵活盒子模型)

在平常的web横排布局中，会经常用到float或display:inline-block，但是在多种不同宽度的移动设备的自适应布局中用的话，还得设置百分比宽度和考虑清除浮动。而Flexible Box Model可以自动计算宽度和自适应，更加方便。 Flexible Box Model有几个属性：

1、box-orient          在父元素上设置   子元素排列 vertical (垂直) or horizontal（水平）

2、box-flex               在子元素上设置   兄弟元素之间比例，仅作一个系数

3、box-align             在父元素上设置    box 排列

4、box-direction    在父元素上设置    box 方向可设置reverse排序相反

5、box-flex-group 在子元素上设置   以组为单位的流体系数

6、box-ordinal-group    以组为单位的子元素排列方向

7、box-pack              在父元素上设置   可设置center和vertically

以下是关于flexible box的几个实例

1、三列自适应布局，且有固定margin

<style>
   *{
       margin:0;
       padding:0;
   }
   .wrap {
       display: -webkit-box;
       -webkit-box-orient: horizontal;
   }
   .child {
       min-height: 200px;
       border: 2px solid #666;
       -webkit-box-flex: 1;
       margin: 10px;
       font-size: 100px;
       font-weight: bold;
       font-family: Georgia;
       -webkit-box-align: center;
   }
</style>
<div class="wrap">
   <div class="child">1</div>
   <div class="child">2</div>
   <div class="child">3</div>
</div>

2、当一列定宽，其余两列分配不同比例亦可(三列布局，一列定宽，其余两列按1：2的比例自适应)：

<style>
   *{
       margin:0;
       padding:0;
   }
   .wrap {
       display: -webkit-box;
       -webkit-box-orient: horizontal;
   }
   .child {
       min-height: 200px;
       border: 2px solid #666;
       margin: 10px;
       font-size: 40px;
       font-weight: bold;
       font-family: Georgia;
       -webkit-box-align: center;
   }
   .w200 {width: 200px}
   .flex1 {-webkit-box-flex: 1}
   .flex2 {-webkit-box-flex: 2}
</style>

<div class="wrap">
   <div class="child w200">200px</div>
   <div class="child flex1">比例1</div>
   <div class="child flex2">比例2</div>
</div>

3、一个常见的web page 的基本布局：

<style>
   *{
       margin:0;
       padding:0;
   }
   header, footer, section {
   border: 10px solid #333;
   font-family: Georgia;
   font-size: 40px;
   text-align: center;
   margin: 10px;
   }
   #doc {
   width: 80%;
   min-width: 600px;
   height: 100%;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   margin: 0 auto;
   }
   header,
   footer {
   min-height: 100px;
   -webkit-box-flex: 1;
   }
   #content {
   min-height: 400px;
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   }

   .w200 {width: 200px}
   .flex1 {-webkit-box-flex: 1}
   .flex2 {-webkit-box-flex: 2}
   .flex3 {-webkit-box-flex: 3}
</style>

<div id="doc">
   <header>Header</header>
   <div id="content">
       <section class="w200">定宽200</section>
       <section class="flex3">比例3</section>
       <section class="flex1">比例1</section>
   </div>
   <footer>Footer</footer>
</div>

更详细的可以查看--->https://www.cnblogs.com/leena/p/6123005.html

和

这里

-webkit-box自适应布局用法

猜你喜欢