flex 是 flexible box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
任何乙個容器都可以指定為 flex 布局。
採用 flex 布局的元素，稱為 flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 flex 專案（flex item）。
容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
下面了解下容器和元素上有哪些常用的屬性
元素在容器裡擺放的方向
注意當你調轉行或列的方向後，flex-start和flex-end對應的方向也被調轉了注意當flex以列為方向時，justify-content控制縱向對齊，align-items控制橫向對齊
row: 元素擺放的方向和文字方向一致。
row-reverse: 元素擺放的方向和文字方向相反。
column: 元素從上放到下。
column-reverse: 元素從下放到上
nowrap: 所有的元素都在一行。
wrap: 元素自動換成多行。
wrap-reverse: 元素自動換成逆序的多行
flex-start: 元素和容器的左端對齊。
flex-end: 元素和容器的右端對齊。
center: 元素在容器裡居中。
space-between: 多餘的空白間距只在元素中間區域分配
space-around: around是環繞的意思，元素周圍保持相等的距離，空白間距在元素的周圍
space-evenly: evenly是勻稱、平等的意思，每個flex子項兩側空白間距完全相等
flex-start: 元素與容器的頂部對齊。
flex-end: 元素與容器的底部對齊。
center: 元素縱向居中。
baseline: 元素在容器的基線位置顯示。
stretch: 元素被拉伸以填滿整個容器
flex-start: 多行都集中在頂部。
flex-end: 多行都集中在底部。
center: 多行居中。
space-between: 行與行之間保持相等距離。
space-around: 每行的周圍保持相等距離。
stretch: 每一行都被拉伸以填滿容器。
flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
如果所有專案的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。
如果乙個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍
flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。
如果乙個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。
負值對該屬性無效。
flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選
可以設定單個元素有與其他元素不一樣的對齊方式
flex-start: 元素與容器的頂部對齊。
flex-end: 元素與容器的底部對齊。
center: 元素縱向居中。
baseline: 元素在容器的基線位置顯示。
stretch: 元素被拉伸以填滿整個容器
乙個用來學習flex 布局的遊戲
阮一峰 flex語法篇
阮一峰 flex例項篇
CSS Flex彈性布局 筆記
flexbox 是 flexible box 的簡稱 注 意思是 靈活的盒子容器 是 css3 引入的新的布局模式。它決定了元素如何在頁面上排列，使它們能在不同的螢幕尺寸和裝置下可 地展現出來。它之所以被稱為 flexbox 是因為它能夠擴充套件和收縮 flex 容器內的元素，以最大限度地填充可用空...
css flex布局實用
張歆琳 關注2016.06.17 10 50 字數 701 閱讀 1063 喜歡 15 首先弄出原始的html結構，左右側邊欄定寬220px id footer footerdiv 現在將內容容器 page 設成flex彈性盒模型 page 中間main就是個普通的div，因此寬度好像沒有自適應，很...
css flex布局基礎
1 flex 讓所有彈性盒模型物件的子元素都有相同的長度，且忽略它們內部的內容 塊級元素 藍色 紅色藍色 紅色藍色 紅色藍色 紅色 main main div 效果 2 flex basis 專案的長度。合法值 auto inherit 或乙個後跟 px em 或任何其他長度單位的數字 main1 ...