伸縮（彈性）盒模型flexbox:決定乙個盒子在其他盒子中的分布以及如何處理可用的空間，使用該
模型可以建立「自適應」瀏覽器視窗的流動布局，可以規定特定的順序，開啟只需要設定display屬
性值為flex目的是在瀏覽器視窗變化時，盒子相應的改變大小。設定了彈性盒模型後，float、clear
、vertical-align在flex中不起作用
實際上就是頁面布局會隨著你拉動瀏覽器邊框時進行縮放
1、flexbox的基礎知識：由於flexbox是乙個整體的模組，有一些屬性在父容器上設定，有一些在
子容器上設定
（1）flexbox的基本結構
<1>在html的部分中首先要規定乙個父容器（父元素），然後父容器裡面包含多個子元素（專案）
父容器父容器裡面的子元素叫做「專案」
<2>其次可以在css部分規定父容器中要怎麼顯示裡面的專案，如是否換行、專案排列方向等
.box 最外層為父容器，定義此容器為彈性布局
.item1 表示該專案佔的比例（flex-grow屬性定義的是比例，即使沒有
寫div的寬度也會進行劃分）
.item2
.item3
（2）常用屬性
<1>父容器中常用的屬性
display:flex; 定義乙個flex容器
<2>專案中常用的屬性（伸縮盒中每乙個元素稱為專案）
①flex-grow:數字; 定義專案的比例
（p.s.設定邊距《也就是說中間的空隙》用margin、margin-left、margin-right）
flex-grow只是設定了比例，不用你再定義width，但是如果要實現字距問題還是要加margin的
**的上下間距可用padding-top（只控制文字），不能用margin-top（因為用margin-top的話
也會一起變化）
Flex伸縮盒模型
1.伸縮容器屬性 1.1設定伸縮容器 設定元素為伸縮容器 display flex 設定元素為內聯級伸縮容器 display inline flex。下面的元素會上來。1.2主軸方向 flex direction屬性決定主軸的方向 即專案的排列方向 flex direction row row 預設...
彈性盒模型flexbox布局例項
我認為當flexbox支援所有的瀏覽器時，由於它比浮動布局更加的簡單和強大性，它將徹底的改變我們的css 布局方式。例如我們可以很容易的寫出乙個元素在未知比例下的居中對齊布局。當然css3 新增的其它屬性，例如grid也可以給前端開發 帶來更多的布局方式。下面給出一些例子來證明為什麼web 開發者應...
17 flexbox彈性盒模型
flexbox彈性盒模型 給父級新增flex display flex 換行 flex wrap wrap flex direction 元素主軸的方向，預設值row，從左到右 row reverse 從右到左 column從上到下 column reverse 從下到上 flex directio...