此類元素是inline block的合體
1) margin和padding都有效；width和height都有效；
.inline<
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.overwidth<
div
class
="overwidth"
>
<
a>a01dd
a>
<
a>a000000002
a>
div>
繼承父元素的display屬性。
實現盒子布局，主要分為容器和子元素相種。在容器元素上用display:flex指定為flex盒子，在子元素上用flex指定元素所占用的格仔數。
flex容器重要屬性：
1) flex-direction：表示專案排列方向，可以有四個，左到右，右到左，上到下，下到上
2) flex-wrap：表示是否允許換行，預設不允許(nowrap)
flex-flow：是flex-direction和flex-wrap的組合寫法
.wrap02.grid02<
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.grid02<
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.grid02<
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.grid.mid<
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.grid.mid<
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.grid.mid<
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屬性，演算法還不明確。
更多專業前端知識，請上
【猿2048】www.mk2048.com
深入理解和應用display屬性（二）
此類元素是inline block的合體 1 margin和padding都有效 width和height都有效 inline div class inline a inline01 a div div class inline a inline02 a div div class inline a...
深入理解Display類的使用
深入理解display類的使用 email cqucyf gmail.com 熟悉了midlet類的使用以後，下面來熟悉一下display類的使用，這個類也是進行j2me程式設計中經常要使用到的類之一。display類有兩個最主要的作用 1 獲得螢幕的屬性。例如螢幕是否是彩色的，以及支援的顏色數量等...
display和visibility的屬性
display屬性設定元素的顯示方式，對應指令碼特性為display，可選值為none block和inline，各值的說明如下 none 隱藏元素，不保留元素顯示時的空間。block塊方式顯示元素。inline 以內嵌方式顯示元素。visibility屬性設定是否顯示元素，對應的指令碼特性為vis...