Display属性表

 

 

Flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

 

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

属性：

1. flex-direction属性

flex-direction: row | row-reverse | column | column-reverse;

设置主轴的方向，也就是项目的排列方向

column          column-reverse;            row                 row-reverse            

1. flex-wrap属性

flex-wrap: nowrap | wrap | wrap-reverse;

flex-wrap属性定义，如果一条轴线排不下，如何换行

 

1. flex-flow

flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

1.  justify-content属性

定义了项目在主轴上的对齐方式。

justify-content:flex-start|flex-end|center|space-between|space-around;

 

1. align-items属性

定义项目在交叉轴上如何对齐

align-items:flex-start|flex-end|center|baseline|stretch;

 

6． align-content属性

定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

align-content:flex-start|flex-end|center|space-between|space-around|stretch;

 

1. order属性: 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
2.  flex-grow属性: 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
3. flex-shrink属性: 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
4. flex-basis属性: 在分配多余空间之前，项目占据的主轴空间（main size）。
5. flex属性: flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
6. align-self属性: 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

Grid布局

基本概念

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

行/列：容器里面的水平区域称为"行"（row），垂直区域称为"列"(column)。

单元格：行和列的交叉区域，称为"单元格"（cell）。

容器属性

1. display: grid指定一个容器采用网格布局。

设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

1. rid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。
2. grid-template-columns 属性：定义每一列的列宽
3. grid-template-rows 属性：定义每一行的行高
   1. repeat() ：接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。
   2. auto-fill ：自动填充
   3. fr : 列之间的比例关系（当有多个fr表示单元之间的倍率关系，单元会分掉总的宽度或者高度）
   4. minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
   5. auto：关键字表示由浏览器自己决定长度。
   6. grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。

grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];

grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];

1. grid-row-gap 属性：设置行与行的间隔（行间距）
2. grid-column-gap属性设置列与列的间隔（列间距）
3. grid-gap：grid-column-gap和grid-row-gap的合并简写形式（如果grid-gap省略了第二个值，浏览器认为第二个值等于第一个值。）
4. grid-template-areas 属性：网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

grid-template-areas: 'a a a'

                    'b b b'

                     'c c c';

 

1. grid-auto-flow 属性：类似于flex的项目排列，但是是网格状的。还是有点区别的。如果

row/column dense：表示尽可能紧密填满，尽量不出现空格。

1. justify-items ：设置单元格内容的水平位置（左中右）
2. 
3. align-items ：设置单元格内容的垂直位置（上中下）于flex不同的是它是说项目在单元格内的对齐方式而不是父元素
4. 
5. place-items ：align-items属性和justify-items属性的合并简写形式。
6. justify-content：属性是整个内容区域在容器里面的水平位置（左中右）
7. align-content：整个内容区域的垂直位置（上中下）
8. 
9. place-content：align-content属性和justify-content属性的合并简写形式
10. grid-auto-columns：新增列的的宽度
11. grid-auto-rows：新增行的的宽度
12. grid-template：grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式
13. grid ：grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式

项目属性：

1. grid-column-start 属性: 左边框所在的垂直网格线
2. grid-column-end 属性: 右边框所在的垂直网格线
3. grid-row-start 属性: 上边框所在的水平网格线
4. grid-row-end 属性：下边框所在的水平网格线
5. grid-column: grid-column-start和grid-column-end的合并简写形式
6. grid-row: grid-row属性是grid-row-start属性和grid-row-end的合并简写形式
7. grid-area: 指定项目放在哪一个区域 
8. justify-self : 设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目
9. align-self : 设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。
10. place-self : align-self属性和justify-self属性的合并简写形式

 

 

 

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。