資訊專欄INFORMATION COLUMN
啟動 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 容器高度一樣
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116528.html
摘要：常規寫法速記法判斷變量是否存在速記法這可能會有些瑣碎，但是值得一提。常規寫法速記法注意這兩個例子并不是完全相等，只要變量是一個真值，該表達式就是成立的。 19+ 個 JavaScript 快速編程技巧 — SitePoint 這確實是一篇針對于基于 JavaScript 語言編程的開發者必讀的文章。在過去幾年我學習 JavaScript 的時候，我寫下了這篇文章，并將其作為 JavaS...
摘要：常規寫法速記法判斷變量是否存在速記法這可能會有些瑣碎，但是值得一提。常規寫法速記法注意這兩個例子并不是完全相等，只要變量是一個真值，該表達式就是成立的。 19+ 個 JavaScript 快速編程技巧 — SitePoint 這確實是一篇針對于基于 JavaScript 語言編程的開發者必讀的文章。在過去幾年我學習 JavaScript 的時候，我寫下了這篇文章，并將其作為 JavaS...
閱讀 2247·2021-11-25 09:43
閱讀 2934·2019-08-30 15:52
閱讀 1884·2019-08-30 15:44
閱讀 973·2019-08-30 10:58
閱讀 752·2019-08-29 18:43
閱讀 3207·2019-08-29 18:36
閱讀 2309·2019-08-29 17:02
閱讀 1446·2019-08-29 17:01
