Css Flex(弹性布局)与Grid(网格布局)属性整理

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>;*/