彈性盒子是 css3 的一種新的布局模式。
css3 彈性盒（ flexible box 或 flexbox），是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。
引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列、對齊和分配空白空間
一：display:flex; 形成彈性盒子
彈性盒子 子元素預設排列狀態:1.因為彈性盒子預設的x軸為主軸，所有子元素預設都橫向排列。
2.如果父元素是彈性盒子：子元素都能設定寬高。
3.如果父元素為彈性盒，讓子元素在彈性盒子裡面左右上下居中，只需要給子元素新增margin:auto;
二：改變主軸的排列方式（指定誰主軸）
flex-direction:屬性值： row x軸為主軸row-reverse 橫向反向排列 column y軸為主軸 column-reverse 縱向反向排列
三：子元素在彈性盒子裡面的 主軸的對齊方式：justify-content: flex-start 彈性盒子的開始的地方。flex-end 彈性盒子的末端center 居中space-between 兩端對齊中間自動分配space-around 完全自動分配空間
四：側軸的對齊方式。align-items:flex-start 開始的地方 flex-end 結束的地方center 居中baseline ( 預設情況下和flex-start等效)stretch（預設值——>拉伸）;
五：控制子元素在彈性盒子裡面是否換行：flex-wrap:nowrap 不換行wrap 換行
六：控制行與行之間的對齊方式：
align-content:
flex-start
flex-end
center
space-between
space-around
strech(拉伸)
注:預設情況下align-content在側軸上執行樣式的時候，會把預設的間距給合併。對於單行子元素，該屬性不起作用
七：flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap;
flex-grow乙個數字，規定專案將相對於其他靈活的專案進行擴充套件的量。
flex-shrink乙個數字，規定專案將相對於其他靈活的專案進行收縮的量。
flex-shrink:0; 彈性盒子內部的子元素不再進行擠壓，正常顯示。
flex-basis專案的長度
彈性盒：新增在子元素上面的屬性：
一：align-self: 針對的是某個子元素在側軸的對齊方式。
注意：align-self 屬性可重寫靈活容器的 align-items 屬性。
屬性值 auto 預設值。元素繼承了它的父容器的 align-items 屬性。
如果沒有父容器則為 "stretch"。
stretch元素被拉伸以適應容器。
center元素位於容器的中心。
flex-start元素位於容器的開頭。
flex-end元素位於容器的結尾。
二：order: 數字越大越往後排，預設為0，支援負數。
三： flex:1; 把父元素（彈性盒子）剩餘空間自動分配(主軸上面的空間)。
復合屬性。設定或檢索彈性盒模型物件的子元素如何分配空間
詳細屬性值： 縮寫「flex: 1」, 則其計算值為「1 1 0%」 縮寫「flex: auto」,
則其計算值為「1 1 auto」 flex: none」,
則其計算值為「0 0 auto」 flex: 0 auto」或者「flex: initial」,
則其計算值為「0 1 auto」，即「flex」初始值
CSS3 彈性盒子 Flex Box
彈性盒子是 css3 的一種新的布局模式 彈性盒子由彈性容器 flex container 和彈性子元素 flex item 兩部分組成。彈性容器通過設定 display 屬性的值為 flex 或 inline flex將其定義為彈性容器。彈性容器內包含了乙個或者多個彈性子元素。屬性描述 displ...
CSS3 彈性盒子 Flex Box 一
彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白空間。彈性盒子由彈...
css3 彈性盒子
display webkit flex 定義元素為彈性盒子 屬性 direction 方向 flex direction row 預設值,子元素正向1 2 3 布局 flex direction row reverse 子元素正向3 2 1 布局 flex direction column 縱向布局...