前面的flex布局主要针对一维布局,grid主要针对二维布局,也叫网格布局。 如下图,对于一个二维布局,可以使用grid-template-columns定义每列占的宽度,使用grid-template-rows定义每行占的高度,使用grid-row-gap定义行间距,使用grid-colume-gap定义列间距。
.container{grid-gap:<grid-row-gap><grid-column-gap>;/* 简写形式,同时设置行和列间距 */grid-row-gap:<length>|<percentage>;/* 单独设置行间距 */grid-column-gap:<length>|<percentage>;/* 单独设置列间距 */}/* 示例 */.container{grid-gap:10px 20px;/* 行间距10px,列间距20px */} grid...
使用grid 布局很简单,通过display属性设置属性值为 grid 或 inline-grid 或者是 subgrid(该元素父元素为网格,继承父元素的行和列的大小) 就可以了。 网格容器中的所有子元素就会自动变成网格项目(grid item),然后设置列(grid-template-columns)和行(grid-template-rows)的大小,设置grid-template-columns有多少个参数...
前面的flex布局主要针对一维布局,grid主要针对二维布局,也叫网格布局。 如下图,对于一个二维布局,可以使用grid-template-columns定义每列占的宽度,使用grid-template-rows定义每行占的高度,使用grid-row-gap定义行间距,使用grid-colume-gap定义列间距。
Grid布局功能最强大,尤其适合“不规则布局”。 float布局 其它 1.调试 outline:1px solid red; 2.取消默认样式 *{margin:0; padding:0;box-sizing:border-box;} float布局两步走 第1步 在子元素上加float:left 和 width 第2步 在父元素上加.clearfix。clearfix内容如下 ...
nowrap(默认):不换行,项目可能溢出容器。 wrap:换行,项目在多行中排列。 wrap-reverse:换行,第一行在下方,后续行向上排列。 .container { flex-wrap: nowrap | wrap | wrap-reverse; } justify-content 定义主轴上的对齐方式。可选值: flex-start(默认):项目向起点对齐。 flex-end:项目向终点对齐。 center:...
flex布局是一维布局,Grid布局是二维布局。 flex布局一次只能处理一个维度上的元素布局,每一行或者一列。Grid布局是将容器划分成了“行”和“列”,产生了一个个的网格,我们可以将网格元素放在与这些行和列相关的位置上,从而达到我们布局的目的。 Flex:弹性盒模型 ...
flex-wrap:定义Flex容器内部是否允许换行(nowrap、wrap、wrap-reverse) align-content:定义多行Flex容器内部的对齐方式(flex-start、flex-end、center、space-between、space-around、stretch) 项目属性 flex:定义项目的伸缩比例(flex-grow、flex-shrink、flex-basis) ...
nowrap(默认):不换行,项目可能溢出容器。 wrap:换行,项目在多行中排列。 wrap-reverse:换行,第一行在下方,后续行向上排列。 .container{flex-wrap:nowrap|wrap|wrap-reverse;} justify-content 定义主轴上的对齐方式。可选值: flex-start(默认):项目向起点对齐。
.container{flex-wrap:nowrap | wrap | wrap-reverse;} 1. 2. 3. justify-content 定义主轴上的对齐方式。可选值: flex-start(默认):项目向起点对齐。 flex-end:项目向终点对齐。 center:项目居中对齐。 space-between:项目间均匀分配间隔,第一个和最后一个项目分别贴靠容器两端。