display属性和flex grid布局
Display属性表
Flex布局
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
属性:
- flex-direction属性
flex-direction: row | row-reverse | column | column-reverse;
设置主轴的方向,也就是项目的排列方向
column column-reverse; row row-reverse
- flex-wrap属性
flex-wrap: nowrap | wrap | wrap-reverse;
flex-wrap属性定义,如果一条轴线排不下,如何换行
-
flex-flow
flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
- justify-content属性
定义了项目在主轴上的对齐方式。
justify-content:flex-start|flex-end|center|space-between|space-around;
- 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;
- order属性: 定义项目的排列顺序。数值越小,排列越靠前,默认为0。
- flex-grow属性: 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
- flex-shrink属性: 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
- flex-basis属性: 在分配多余空间之前,项目占据的主轴空间(main size)。
- flex属性: flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
- align-self属性: 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
Grid布局
基本概念
采用网格布局的区域,称为"容器"(container)。容器内部采用网格定位的子元素,称为"项目"(item)。
行/列:容器里面的水平区域称为"行"(row),垂直区域称为"列"(column)。
单元格:行和列的交叉区域,称为"单元格"(cell)。
容器属性
- display: grid指定一个容器采用网格布局。
设为网格布局以后,容器子元素(项目)的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
- rid-template-columns属性定义每一列的列宽,grid-template-rows属性定义每一行的行高。
- grid-template-columns 属性:定义每一列的列宽
-
grid-template-rows 属性:定义每一行的行高
- repeat() :接受两个参数,第一个参数是重复的次数(上例是3),第二个参数是所要重复的值。
- auto-fill :自动填充
- fr : 列之间的比例关系(当有多个fr表示单元之间的倍率关系,单元会分掉总的宽度或者高度)
- minmax()函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值。
- auto:关键字表示由浏览器自己决定长度。
- 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];
- grid-row-gap 属性:设置行与行的间隔(行间距)
- grid-column-gap属性设置列与列的间隔(列间距)
- grid-gap:grid-column-gap和grid-row-gap的合并简写形式(如果grid-gap省略了第二个值,浏览器认为第二个值等于第一个值。)
- grid-template-areas 属性:网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。
grid-template-areas: 'a a a'
'b b b'
'c c c';
- grid-auto-flow 属性:类似于flex的项目排列,但是是网格状的。还是有点区别的。如果
row/column dense:表示尽可能紧密填满,尽量不出现空格。
- justify-items :设置单元格内容的水平位置(左中右)
- align-items :设置单元格内容的垂直位置(上中下)于flex不同的是它是说项目在单元格内的对齐方式而不是父元素
- place-items :align-items属性和justify-items属性的合并简写形式。
- justify-content:属性是整个内容区域在容器里面的水平位置(左中右)
- align-content:整个内容区域的垂直位置(上中下)
- place-content:align-content属性和justify-content属性的合并简写形式
- grid-auto-columns:新增列的的宽度
- grid-auto-rows:新增行的的宽度
- grid-template:grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式
- grid :grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式
项目属性:
- grid-column-start 属性: 左边框所在的垂直网格线
- grid-column-end 属性: 右边框所在的垂直网格线
- grid-row-start 属性: 上边框所在的水平网格线
- grid-row-end 属性:下边框所在的水平网格线
- grid-column: grid-column-start和grid-column-end的合并简写形式
- grid-row: grid-row属性是grid-row-start属性和grid-row-end的合并简写形式
- grid-area: 指定项目放在哪一个区域
- justify-self : 设置单元格内容的水平位置(左中右),跟justify-items属性的用法完全一致,但只作用于单个项目
- align-self : 设置单元格内容的垂直位置(上中下),跟align-items属性的用法完全一致,也是只作用于单个项目。
- place-self : align-self属性和justify-self属性的合并简写形式
Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。