flex專案屬性
本篇文章的內容均來自於
阮一峰flex布局教程
flex全稱為flexible box意為彈性布局相比於傳統布局display+position+float的方式，flex可以式布局更加靈活，大大提高效率
.任何容器都可以使用flex布局
.box
.box
.box
採用 flex 布局的元素，稱為 flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 flex 專案（flex item），簡稱"專案"。
容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。
flex-direction屬性決定主軸的方向（即專案的排列方向）
預設情況下，專案都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
（1）nowrap（預設）：不換行。
（2）wrap：換行，第一行在上方。
（3）wrap-reverse：換行，第一行在下方。
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
.box
.box
align-items屬性定義專案在交叉軸上如何對齊。
align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
.box
order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。
flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大
flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
.item
.item
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
.item
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。
align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
.item
flex布局學習筆記
布局的傳統解決方案，基於盒狀模型，依賴display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。新的方案 flex 布局，可以簡便 完整 響應式地實現各種頁面布局 flex flexible box 的縮寫，彈性布局，任何乙個容器都可以指定為...
Flex布局學習筆記
flex 是flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為 flex 布局。行內元素也可以使用 flex 布局。webkit 核心的瀏覽器，必須加上 webkit字首。注意，設為 flex 布局以後，子元素的float clear和vert...
flex布局 學習筆記
一 講解作業 二 z index用於設定定位元素顯示的層級 預設定位後的元素會在普通文件元素之上顯示，那麼如何做到讓定位後的元素顯示在文件的下方呢？設定z index的值即可 z軸概念 水平的x軸和垂直的y軸構成了乙個面，而z軸則就是垂直這個面。z index作用 z index屬性其作用就為設定乙...