深入理解和應用display屬性（二）

小龍女先生發表於2016-10-20

四、inline-block

此類元素是inline + block的合體

1) margin和padding都有效；width和height都有效；

.inline{
                display: inline-block;
                width: 200px;
                background: red;
                margin: 10px;
                padding: 10px; 
            }
<div class="inline"><a>inline01</a></div>
        <div class="inline"><a>inline02</a></div>
        <div class="inline"><a>inline03</a></div>
        <div class="inline"><a>inline04</a></div>

1) 還是存在8畫素的間隔

2) Block/inline-block元素包裹的inline-block元素，預設超width會換行，hieght撐開，可以通過white-space:nowrap強制不換行，但不能實現文字省略顯示。

a{
                background: red;  
                font-size: 14px;
                display: inline-block;
            }   
            .overWidth{
                white-space: nowrap;
                width: 100px;
                border: 1px solid gray;
                overflow: hidden;
                text-overflow: ellipsis;  
            }
<div class="overWidth" >
            <a>a01dd</a>
            <a>a000000002</a>
        </div>

五、Inherit

繼承父元素的display屬性。

六、flex

實現盒子佈局，主要分為容器和子元素相種。在容器元素上用display:flex指定為flex盒子，在子元素上用flex指定元素所佔用的格子數。

Flex容器重要屬性：

1) Flex-direction：表示專案排列方向，可以有四個，左到右，右到左，上到下，下到上

2) Flex-wrap：表示是否允許換行，預設不允許(nowrap)

Flex-flow：是flex-direction和flex-wrap的組合寫法

.wrap02{
                width: 600px;
                height: 200px;
                border: 1px solid red;
                display: flex;
                flex-flow: column wrap
            }
            .grid02{
                flex-basis: 60px; 
                background: gray; 
            }
<div class="wrap02">
            <div class="grid02">01</div>
            <div class="grid02">02</div>
            <div class="grid02">03</div>
            <div class="grid02 grid04 ">04</div>
            <div class="grid02">05</div>
        </div>

4) Justify-content：設定專案的間隔對齊方式（X軸），注意space-between（兩端對齊，專案之間間隔一樣，頂邊）；space-around（每個專案兩側的間隔相等，所以，專案之間的間隔比專案與邊框的間隔大一倍）

.wrap02{
                width: 600px;
                height: 200px;
                border: 1px solid red;
                display: flex;
                flex-flow: column wrap;
                justify-content: space-around;
            }
            .grid02{
                flex-basis: 60px; 
                background: gray; 
            }
<div class="wrap02">
            <div class="grid02">01</div>
            <div class="grid02">02</div>
            <div class="grid02">03</div>
            <div class="grid02 grid04 ">04</div>
            <div class="grid02">05</div>
        </div>

5) Align-items：屬性定義在交叉軸上的對齊方式（Y軸，垂直對齊），stretch可以拉申(預設值)

.wrap02{
                width: 600px;
                height: 200px;
                border: 1px solid red;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
            }
            .grid02{
                flex-basis: 200px;  
                background: gray; 
            }
<div class="wrap02">
            <div class="grid02">01</div>
            <div class="grid02">02</div>
            <div class="grid02">03</div>
            <div class="grid02 grid04 ">04</div>
            <div class="grid02">05</div>
        </div>

Flex專案的重要屬性：

1) Align-self：專案自身的對齊方式，可以覆蓋容器的align-items屬性的值

2) Flex：他是flow-grow\flow-shrink\flex-basis簡寫，設定元素佔用的格子數，如下例子格子是均分的

.wrap{
                width: 400px;
                height: 200px;
                border: 1px solid red;
                display: -webkit-flex;
                display: flex;  
            }
            .grid{
                background: gray; 
                flex: 1; 
            }
            .mid{
                flex: 2; 
                background: red;    
            }
<div class="wrap" >
            <div class="grid">01</div>
            <div class="mid">01</div>
            <div class="grid">01</div>
        </div>

3) Flex-grow：所有子元素之和小於容器寬度時，如果處理剩餘寬度，flex-grow預設為0，如果設定為正數，則表示索取剩餘寬度值，公式如下：
子元素自身寬度 + 剩餘寬度*(子元素自身glex-frow)/(所有子元素的flex-grow之後和)

.wrap{
                width: 400px;
                height: 200px;
                border: 1px solid red;
                display: -webkit-flex;
                display: flex;  
            }
            .grid{
                background: gray; 
                flex-grow: 1;
                flex-basis: 50px;
            }
            .mid{ 
                flex-basis: 60px;
                background: red;    
            }
<div class="wrap" >
            <div class="grid">01</div>
            <div class="mid">01</div>
            <div class="grid">01</div>
        </div>

Grid1和grid3計算：50 + 240 * 1/2 = 170

Grid2計算：沒有設定flex-grow屬性，所以為固定值

4) Flex-shrink：所有子元素之和大於容器寬度時，如果處理超出寬度，flex-shrink預設為1，值越大減小的越厲害，值為0，表示不減少,公式如下：
子元素自身寬度 – 超出寬度 * ( 子元素自身寬度 * 子元素自身的flex-shrink/ ( 所有子元素寬度 * 子元素的flex-shrink之和) )

.wrap{
                width: 400px;
                height: 200px;
                border: 1px solid red;
                display: -webkit-flex;
                display: flex;  
            }
            .grid{
                background: gray; 
                flex-basis: 200px;
            }
            .mid{ 
                flex-basis: 100px;
                background: red;    
            }
<div class="wrap" >
            <div class="grid">01</div>
            <div class="mid">01</div>
            <div class="grid">01</div>
        </div>

Grid1和grid3計算：200 – 100 * 200 / 500 = 160

Grid2計算：100 – 100 * 100 /500 = 80

注意事項：

1) Flex-grow和flex-shrink不好和flex直接混合應用，此兩個值是在固定寬度的情況下進行均分的演算法，如果嵌入flex屬性，演算法還不明確。

相關文章