Flex(彈性佈局) 屬性目錄
容器(Flex Container) 屬性
display /*flex | inline-flex*/
/*項目的排列方向*/
flex-direction /* row | row-reverse | column | column-reverse */
/*一條軸線排不下，如何換行*/
flex-wrap /* nowrap | wrap | wrap-reverse */
/*flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。*/
flex-flow /* <flex-direction> <flex-wrap> */
/*項目在主軸上的對齊方式*/
justify-content /* flex-start | flex-end | center | space-between | space-around */
/*項目在交叉軸上如何對齊*/
align-items /* flex-start | flex-end | center | baseline | stretch */
/*定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用*/
align-content /* flex-start | flex-end | center | space-between | space-around | stretch */
項目屬性
/*定義項目的排列順序。數值越小，排列越靠前，默認爲0*/
order /*<integer>*/
/*定義項目的放大比例，默認爲0，即如果存在剩餘空間，也不放大。*/
flex-grow /*如果所有項目的flex-grow屬性都爲1，則它們將等分剩餘空間（如果有的話）。如果一個項目的flex-grow屬性爲2，其他項目都爲1，則前者佔據的剩餘空間將比其他項多一倍。*/
/*定義了項目的縮小比例，默認爲1，即如果空間不足，該項目將縮小。*/
flex-shrink /*如果所有項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性爲0，其他項目都爲1，則空間不足時，前者不縮小。*/
/*定義了在分配多餘空間之前，項目佔據的主軸空間（main size）*/
flex-basis /*<length> | auto*/
/*flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto*/
flex /*auto (1 1 auto) 和 none (0 0 auto).flex:1表示flex:1 1 0%*/
/*單個項目的對齊方式,默認值爲auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch*/
align-self /*auto | flex-start | flex-end | center | baseline | stretch*/
Grid(網格佈局) 屬性目錄
網格容器(Grid Container) 屬性
display /*grid | inline-grid*/
/*劃分行高和列寬*/
grid-template-columns /*網格列：百分比、px值、auto、repeat(2,1fr)*/
grid-template-rows /*網格行：百分比、px值、auto、repeat(2,1fr)*/
/*網格區域*/
grid-template-areas /*"header header header header"
"main main . sidebar"
"footer footer footer footer";*/
grid-template /*grid-template-rows ，grid-template-columns ，grid-template-areas 簡寫屬性*/
/*設置行與行的間隔，列與列的間隔。現在可以省略grid-,用column-gap表示*/
grid-column-gap /*長度值px*/
grid-row-gap
grid-gap /*<grid-row-gap> <grid-column-gap>*/
/*單元格內容的水平位置、垂直位置*/
justify-items /*start | end | center | stretch;*/
align-items
place-items /*<align-items> <justify-items>*/
/*整個內容區域在容器裏面的水平位置、垂直位置*/
justify-content
align-content/*start | end | center | stretch | space-around | space-between | space-evenly;*/
place-content /*<align-content> <justify-content>*/
/*自動創建的多餘網格的列寬和行高*/
grid-auto-columns
grid-auto-rows
/*項目排列方式，默認值是row，即"先行後列"*/
grid-auto-flow /*row | column | row dense | column dense(緊密填滿，儘量不出現空格)*/
grid /*grid屬性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow這六個屬性的合併簡寫形式。*/
網格項(Grid Items) 屬性
/*用於指定項目的位置，從最左邊網格線開始由1遞增*/
grid-column-start /*左邊框所在的垂直網格線，1*/ /* span 2 (跨越2個網格)*/
grid-column-end /*右邊框所在的垂直網格線，2*/
grid-column /* 1/3 | 1/span 2 */
grid-row-start /*上邊框所在的垂直網格線，1*/
grid-row-end
grid-row
/*項目的區域*/
grid-area /*<row-start> / <column-start> / <row-end> / <column-end>;*/
/*設置單元格內容的水平位置，跟justify-items屬性的用法完全一致，但只作用於單個項目*/
justify-self /*start | end | center | stretch;*/
align-self
place-self /*<align-self> <justify-self>;*/