flex-box 速記表

啓動 flex-box：

父元素設置 display: flex; 或 display:inline-flex;

flex container： 父元素顯示設置 display: flex

flex item：flex container 中的子元素

flex 容器屬性：

• flex-direction：控制 flex 元素沿着 main-axis 的排列方向

  • row：默認值，flex 元素沿着 main-axis 從左到右排列

  • column：flex 元素將沿着 cross-axis 從上到下垂直排列

  • row-reverse：flex 元素沿着 main-axis 從右到左排列

  • column-reverse：flex 元素將沿着 cross-axis 從下到上垂直排列

• flex-wrap： 指定 flex 元素單行顯示仍是多行顯示

  • nowrap：默認值，flex 元素在 flex 容器內不換行排列

  • wrap：flex 元素 被打斷到多個行中。cross-start 會根據 flex-direction 的值 至關於 start 或 before。cross-end 爲 cross-start 的相對值

  • wrap-reverse：和 wrap 的表現同樣可是 cross-start 和 cross-end 交替排列

• flex-flow：是 flex-direction 和 flex-wrap 的簡寫

• justify-content：定義了瀏覽器如何分配順着父容器 main-axis 的 flex 元素之間及其周圍的空間

  • flex-start：默認值，flex 元素靠 main-axis 開始邊緣（左對齊）

  • flex-end：全部 flex 元素靠 main-axis 結束邊緣（右對齊）

  • center：全部 flex 元素排在 main-axis中間（居中對齊）

  • space-between：除了第一個和最一個 flex 元素的二者間間距相同（兩端對齊）

  • space-around：讓每一個 flex 元素具備相同的空間

• align-items：以與 justify-content 相同的方式在側軸方向上將當前行上的 flex 元素對齊

  • stretch：默認值，讓全部的 flex 元素高度和 flex 容器高度同樣

  • flex-start：讓全部 flex 元素靠 cross-axis 開始邊緣（頂部對齊）

  • flex-end：讓全部 flex 元素靠 cross-axis 結束邊緣（底部對齊）

  • center：讓 flex 元素在 cross-axis 中間（居中對齊）

  • baseline：讓全部 flex 元素在 cross-axis 上沿着他們本身的基線對齊

• align-content：定義彈性容器的側軸方向上有額外空間時，如何排布每一行，當彈性容器只有一行時無做用

  • stretch：默認值，拉伸 flex 元素，讓他們沿着 cross-axis 適應 flex 容器可用的空間

  • flex-start：讓多行 flex 元素靠 cross-axis開始邊緣，沿着 cross-axis 從上到下排列，flex 元素在 flex 容器中頂部對齊

  • flex-end：讓多行 flex 元素靠着 cross-axis 結束位置，讓 flex 元素沿着Cross-Axis從下到上排列，即底部對齊

  • center：讓多行 flex 元素在cross-axis中間，在 flex 容器中居中對齊

flex 元素屬性：

• order：容許 flex 元素在一個 flex 容器中從新排序 相似 z-index

• flex-grow：控制 flex 元素在容器有多餘的空間如何放大（擴展）

• flex-shrink：控制 flex 元素在容器沒有額外空間又如何縮小

• flex-basis：指定了 flex 元素在主軸方向上的初始大小

  • auto：默認值，flex 元素寬度的計算是基於內容的多少來自動計算

  • 取任何用於 width 屬性的任何值，好比 % || em || rem || px等

• flex：flex-grow flex-shrink flex-basis 的速記

  • flex: 0 1 auto; 默認行爲

  • flex: 0 0 auto; 至關於 flex: none; 它基本上是一個固定寬度的元素，其初始寬度是基於 flex 元素中內容大小

  • flex: 1 1 auto; 至關於 flex: auto; 自動計算初始化寬度，可是若是有必要，會伸展或者收縮以適應整個可用寬度

  • flex: "positive number" 將 flex 元素的初始寬度設置爲零，伸展元素以填滿可用空間 而且最後只要有可能就收縮元素

• align-self：總體對齊 flex 容器內的全部彈性項目，改變一個 flex 元素沿着側軸的位置，而不影響相鄰的 flex 元素

  • auto：默認值，設置爲父元素的 align-item 值，若是該元素沒有父元素的話，就設置爲 stretch

  • flex-start：元素會對齊到 cross-axis 的首端

  • flex-end：元素會對齊到 cross-axis 的尾端

  • center：flex 元素會對齊到 cross-axis 的中間，若是該元素的 cross-size 的尺寸大於 flex 容器，將在兩個方向均等溢出

  • baseline：全部的 flex 元素會沿着基線對齊

  • stretch：將目標元素拉伸，以沿着 cross-axis 填滿 flex 容器的可用空間，flex 元素高度和 flex 容器高度同樣