應用在 flex items上的 css 屬性
flex布局是目前web開發中使用最多的布局方案：
兩個重要的概念：
開啟flex布局的方法
flex布局的相容性
注意：預設情況下felx items 僅在一行中顯示，若是設定flex-wrap設定為多行，那麼，當flex items 到達main end，就會換行（可能沒有備註好）
注意：預設從左往右的水平軸為主軸，垂直軸為交叉軸，且flex items 的排列方式為從左往右，從上往下，但是不是固定的，可以改變。
應用在 flex container 上的 css 屬性
flex-direction屬性
flex items 預設都是沿著主軸（main axis）從main start 開始往main end方向排布
flex-direction 屬性是用來決定主軸的方向的，有四個值：
justify-content 屬性
justify-content 決定了flex items 在main axis 上的對齊方式
取值如下：
align-items 屬性
align-items 決定了 flex items 在交叉軸（cross axis）上的對齊方式。
取值如下：
flex-wrap 屬性
預設情況下，所有的flex items 都會在同一行顯示，若是顯示不下，那麼便會對 flex items 進行壓縮。
flex-wrap 決定了 flex container 是單行還是多行
取值如下：
flex-flow 屬性
flex-flow 是 flex-direction || flex-wrap 的縮寫屬性，可以省略，順序隨意。
align-content 屬性
align-content 決定了多行flex items 在cross axis 的對齊方式（即控制垂直方向上的flex items之間的距離），用法與justify-content類似。預設是多行的 flex items 等分
取值如下：
應用在 flex items上的 css 屬性
order 屬性
order 決定了flex items 的排布順序
algin-self 屬性
flex items 可以通過 algin-self 覆蓋 flex container 設定的 align-items。
flex-grow 屬性
預設情況下不會生長
flex-grow 決定了 flex items 如何擴充套件
可以設定任意非負數（正小數、正整數、0），預設值是0
當flex container 在 main axis 方向上有剩餘size 時，flex item擴充套件的 size 為：
flex-shrink 屬性
預設情況下會伸縮
flex-shrink 決定了 flex items 如何收縮
可以設定任意非負數（正小數、正整數、0），預設值是1
當flex container 在 main axis 方向上超過了flex container 的 size時 ，flex-shrink 屬性才會生效，每個 flex item 收縮的 size 為：
flex-basis 屬性
flex-basis 用來設定flex items 在main axis 方向上的 base size
取值為：auto（預設值）、具體的寬度數值（如100px）
決定flex items 最終base aize的因素，從優先順序高到低
flex屬性
flex 是 flex-grow || flex-shrink || flex-basis 的簡寫，flex 屬性可以指定1個、2個或3個值。
單值語法：值必須為以下其中之一：
雙值語法：第乙個值必須為無單位數，並且它會被當作< flex-grow >的值。
三值語法：
Flex布局講解
彈性盒模型 彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box或flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白空間。彈性...
Flex布局 flex布局的詳細用法總結
tips 行內元素也可以使用 flex 布局 box 注意 flex 布局以後，子元素的float clear和vertical align屬性將失效 概念 採用 flex 布局的元素，稱為 flex 容器，簡稱 容器 它的所有子元素自動成為容器成員，稱為 flex 專案，簡稱 專案 六個屬性 1....
彈性布局詳細講解
wrap width 1200px height 200px display flex border 1px solid 000 或者把容器變為行內元素 wrap width 1200px height 200px display inline flex border 1px solid 000 彈...