Grid 网格布局
flex布局是轴线布局,只能指定项目针对轴线的位置,可以看作是一维布局。
grid布局则是将容器分成行和列,产生单元格,指定项目所在的单元格,可以看作是二位布局
grid布局比flex更强大
注意,设为网格布局以后,容器子元素(项目)的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
容器
网格布局的区域称为容器
容器属性
行和列
row —行
column---- 列
grid-gap 行列间隔
grid-gap: ;
grid-row-gap 行间隔
grid-column-gap 列间隔
grid-template-areas 自定义区域
grid-auto-flow 调整row 还是column
justify-items 属性,align-items 属性,place-items 属性 —项目的布局
.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}
start:对齐单元格的起始边缘。
end:对齐单元格的结束边缘。
center:单元格内部居中。
stretch:拉伸,占满单元格的整个宽度(默认值)。
place-items属性是align-items属性和justify-items属性的合并简写形式
justify-content 属性,align-content,place-content 属性—容器布局
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
place-content属性是align-content属性和justify-content属性的合并简写形式。
grid-auto-columns 属性, grid-auto-rows 属性
一些项目的指定位置,在现有网格的外部。比如网格只有3列,但是某一个项目指定在第5行。这时,浏览器会自动生成多余的网格,以便放置项目。
grid-template 属性,
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-start属性和grid-row-end的合并简写形式
grid-area 属性
justify-self 属性,
align-self 属性,
place-self 属性
版权声明:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符,请将相关资料发送至xkadmin@xkablog.com进行投诉反馈,一经查实,立即处理!
转载请注明出处,原文链接:https://www.xkablog.com/rfx/66754.html