彈性子元素屬性
鳴謝彈性盒子是 css3 的一種新的布局模式。
css3 彈性盒（ flexible box 或 flexbox），是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。
引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列、對齊和分配空白空間。
彈性盒子由彈性容器(flex container)和彈性子元素(flex item)組成。
彈性容器通過設定 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
彈性容器內包含了乙個或多個彈性子元素。
注意： 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內布局。
彈性子元素通常在彈性盒子內一行顯示。預設情況每個容器只有一行
flex-direction 屬性指定了彈性子元素在父容器中的位置。
語法:
flex-direction: row | row-reverse | column | column-reverserow：橫向從左到右排列（左對齊），預設的排列方式。
row-reverse：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。
column：縱向排列。
column-reverse：反轉縱向排列，從後往前排，最後一項排在最上面。
內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis）對齊。
justify-content 語法如下：
justify-content: flex-start | flex-end | center | space-between | space-aroundflex-start：
彈性專案向行頭緊挨著填充。這個是預設值。第乙個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，而後續彈性項依次平齊擺放。
flex-end：
彈性專案向行尾緊挨著填充。第乙個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，而後續彈性項依次平齊擺放。
center：
彈性專案居中緊挨著填充。（如果剩餘的自由空間是負的，則彈性專案將在兩個方向上同時溢位）。
space-between：
彈性專案平均分布在該行上。如果剩餘空間為負或者只有乙個彈性項，則該值等同於flex-start。否則，第1個彈性項的外邊距和行的main-start邊線對齊，而最後1個彈性項的外邊距和行的main-end邊線對齊，然後剩餘的彈性項分布在該行上，相鄰專案的間隔相等。
space-around：
彈性專案平均分布在該行上，兩邊留有一半的間隔空間。如果剩餘空間為負或者只有乙個彈性項，則該值等同於center。否則，彈性專案沿該行分布，且彼此間隔相等（比如是20px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。
align-items 設定或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。
語法:
align-items: flex-start | flex-end | center | baseline | stretchflex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與』flex-start』等效。其它情況下，該值將參與基線對齊。
stretch：如果指定側軸大小的屬性值為』auto』，則其值會使專案的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照』min/max-width/height』屬性的限制。
flex-wrap 屬性用於指定彈性盒子的子元素換行方式。
語法:
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;nowrap - 預設， 彈性容器為單行。該情況下彈性子項可能會溢位容器。
wrap - 彈性容器為多行。該情況下彈性子項溢位的部分會被放置到新行，子項內部會發生斷行
wrap-reverse -反轉 wrap 排列。
align-content 屬性用於修改 flex-wrap 屬性的行為。類似於 align-items, 但它不是設定彈性子元素的對齊，而是設定各個行的對齊。
語法:
align-content: flex-start | flex-end | center | space-between | space-around | stretchstretch - 預設。各行將會伸展以占用剩餘的空間。
flex-start - 各行向彈性盒容器的起始位置堆疊。
flex-end - 各行向彈性盒容器的結束位置堆疊。
center -各行向彈性盒容器的中間位置堆疊。
space-between -各行在彈性盒容器中平均分布。
space-around - 各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。
語法:
order:integer：用整數值來定義排列順序，數值小的排在前面。可以為負值。
設定"margin"值為"auto"值，自動獲取彈性容器中剩餘的空間。所以設定垂直方向margin值為"auto"，可以使彈性子元素在彈性容器的兩上軸方向都完全居中。
align-self 屬性用於設定彈性元素自身在側軸（縱軸）方向上的對齊方式。
語法:
align-self: auto | flex-start | flex-end | center | baseline | stretchauto：如果』align-self』的值為』auto』，則其計算值為元素的父元素的』align-items』值，如果其沒有父元素，則計算值為』stretch』。
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與』flex-start』等效。其它情況下，該值將參與基線對齊。
stretch：如果指定側軸大小的屬性值為』auto』，則其值會使專案的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照』min/max-width/height』屬性的限制。
flex 屬性用於指定彈性子元素如何分配空間。
語法:
flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]auto: 計算值為 1 1 auto
initial: 計算值為 0 1 auto
none：計算值為 0 0 auto
inherit：從父元素繼承
[ flex-grow ]：定義彈性盒子元素的擴充套件比率。
[ flex-shrink ]：定義彈性盒子元素的收縮比率。
[ flex-basis ]：定義彈性盒子元素的預設基準值。
感謝菜鳥教程提供的教程。
flex彈性盒子,,彈性盒子布局
flex 彈性 布局 2009年w3c推出flex布局.可以簡便,完整,響應式的實現各種網頁布局 ie10 以往的網頁布局 layout 方式 基於盒模型,依賴display屬性 margin屬性 position屬性 float屬性特殊布局比較麻煩 比如元素的垂直居中 一.flex是什麼?flex...
彈性盒子布局 flex布局
彈性盒子布局方式 box 設為flex布局後，子元素的float clear和vertical align屬性將失效 採用 flex 布局的元素，稱為 flex 容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為 flex 專案 flex item 簡稱 專案 容器...
流失布局 彈性盒子布局
先建立專案檔案，在index.html 檔案裡面新增視口標籤 分析觀察專案結構 移動端專案一定要在不同尺寸的裝置上面多跑跑，看看頁面布局會不會發生變化。百分比布局，不是每乙個元素的尺寸必須必須寫成百分百。但是百分比布局，寬寫百分比，高正常寫。背景精靈圖寫法 消除a標籤在移動端 自帶高光效果 webk...