盒子模型-webkit-box

display:-webkit-box

原文地址:https://www.cnblogs.com/frankwong/p/4603141.html

Flexbox 爲 display 屬性賦予了一個新的值（即 box 值）, flexbox的屬性有很多，記錄一些比較常用的屬性：

• 用於父元素的樣式：

1. display: box; 該屬性會將此元素及其直系子代加入彈性框模型中。（Flexbox 模型只適用於直系子代）
2. box-orient: horizontal | vertical | inherit; 該屬性定義父元素的子元素是如何排列的。
3. box-pack: start | end | center | justify; 設置沿 box-orient 軸的父元素中子元素的排列方式。因此，如果 box-orient 是水平方向，則父元素的子元素是水平的排列方式，反之亦然。（表示父容器裏面子容器的水平對齊方式--垂直排列時--定寬）
4. box-align: start | end | center | baseline | stretch; 基本上而言是 box-pack 的同級屬性。設置框的子代在框中的排列方式。如果方向是水平的，該屬性就會決定垂直排列，反之亦然。（表示父容器裏面子容器的垂直對齊方式--水平排列時--定高）

• 用於子元素的樣式：

1. box－flex: 0 | 任意數字; 該屬性讓子容器針對父容器的寬度按一定規則進行劃分。

• 案例1：

 

 1 <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }
 6         .parent{
 7             width: 500px;
 8             height: 200px;
 9             display: -webkit-box;
10             -webkit-box-orient: horizontal;/* 雖然默認的排列方式是水平的，但是爲了區分起見，加上該屬性 */
11         }
12         .child-one{
13             background: lightblue;
14             -webkit-box-flex: 1;
15         }
16         .child-two{
17             background: lightgray;
18             -webkit-box-flex: 2;
19         }
20         .child-three{
21             background: lightgreen;
22             -webkit-box-flex: 3;
23         }
24     </style>
25 
26 <div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000">
27     <div class="parent">
28         <div class="child-one">1</div>
29         <div class="child-two">2</div>
30         <div class="child-three">3</div>
31     </div>
32 </div>

 

說明：讓.parent也水平居中的話，再複用一次box屬性即可；child-one佔了1/6；child-two佔了2/6; child-three佔了3/6;

• 案例2:

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .parent{
            width: 500px;
            height: 200px;
            display: -webkit-box;
            -webkit-box-orient: horizontal;/* 雖然默認的排列方式是水平的，但是爲了區分起見，加上該屬性 */
        }
        .child-one{
            background: lightblue;
            -webkit-box-flex: 1;
        }
        .child-two{
            background: lightgray;
            -webkit-box-flex: 2;
        }
        .child-three{
            background: lightgreen;
            /* 加了固定高度和邊距 */
            width: 150px;
            margin: 0 15px;

        }
    </style>

<div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000">
    <div class="parent">
        <div class="child-one">1</div>
        <div class="child-two">2</div>
        <div class="child-three">3;width:150px;</div>
    </div>
</div>

說明：父容器的寬度500px減去設置了子容器的150px基礎上再減去（100px＋2×15px），這剩下的寬度值則按box-flex設置的值進行劃分；

 

• 案例3:

 

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .parent{
            width: 400px;
            height: 600px;
            display: -webkit-box;
            -webkit-box-orient: vertical;/* 豎向排列 */
        }
        .child-one{
            background: lightblue;
            -webkit-box-flex: 1;
        }
        .child-two{
            background: lightgray;
            -webkit-box-flex: 2;
        }
        .child-three{
            background: lightgreen;
            /* 加了固定的高度和邊距 */
            height: 200px;
            margin: 15px 0;
        }
    </style>

<div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000">
    <div class="parent">
        <div class="child-one">1</div>
        <div class="child-two">2</div>
        <div class="child-three">3</div>
    </div>
</div>

 

說明：然而豎向排列跟橫向排列，在原理上，並沒有什麼卵區別；

• 案例4

 

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        .parent{
            width: 400px;
            height: 200px;
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            -webkit-box-align: center; /* 水平 對應 box-align */
        }
        .child-one{
            background: lightblue;
            -webkit-box-flex: 1;
            height: 100px;
        }
        .child-two{
            background: lightgray;
            -webkit-box-flex: 2;
            height: 110px;

        }
        .child-three{
            background: lightgreen;
            -webkit-box-flex: 3;
            height: 120px;

        }
    </style>

<div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000">
    <div class="parent">
        <div class="child-one">height: 100px;</div>
        <div class="child-two">height: 110px;</div>
        <div class="child-three">height: 130px;</div>
    </div>
</div>

 

說明：在水平方向上排列時，box-align:center;定義了垂直方向的居中；