ios grid布局 grid布局方式

转载

kekenai 2023-10-08 12:20:24

文章标签 ios grid布局属性设置属性值网格布局 文章分类 iOS 移动开发

什么是Grid布局？

网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，可以做出各种各样的布局。它与flex布局有些相似，但是flex只能针对轴线排列，是一维布局，而grid将容器划分为了行和列，是二维布局，简单的来说就是grid布局比flex布局牛逼太多。

先来看看grid布局有哪些属性

和flex一样，采用grid布局的元素称为’容器’，容器内部的子元素称为’项目’。

容器上的属性

display: grid 指定一个容器采用网格布局
grid-template-columns 定义每一列的列宽
grid-template-rows 定义每一行的行高

repeat() 接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值
fr 关键字如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍
minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
auto 关键字浏览器自动设置长度

row-gap 设置行间距
column-gap 设置列间距
gap 间距的简写
grid-template-areas 指定区域
grid-auto-flow 默认是row先行后列，column是先列后行
justify-items属性设置单元格内容的水平位置
align-items属性设置单元格内容的垂直位置
place-items属性是合并简写形式
justify-content属性是整个内容区域在容器里面的水平位置
align-content属性是整个内容区域在容器里面的垂直位置

项目上的属性

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属性设置单元格内容的垂直位置

下面逐个介绍各个属性的用法

容器属性

grid-template-columns 属性和grid-template-rows 属性

.box{
   	display: grid;
    grid-template-columns: 100px 200px 100px; //可以设置绝对单位
    grid-template-columns: 1fr 2fr 1fr; //fr关键字
    grid-template-columns: repeat(auto-fill, 100px); //auto-fill关键字，当容器宽度不知道时可以使用auto-fill让子元素先在同一行上排列，第一行排满后再换行
    grid-template-columns: 20% 60% 20%; //可以设置百分比
    grid-template-rows: repeat(3, 50px); //reapeat()函数
}

gap属性

gap属性是row-gap(行间距) 和 column-gap(列间距)的简写形式

.box{
   	 display: grid;
   	 gap: 10px 20px;
}

grid-template-areas 属性

.box{
    display: grid;
    grid-template-areas: "header header header"
                        "main main side"
                        "footer footer footer"; 
}

grid-auto-flow 属性

.box{
    display: grid;
    grid-auto-flow: column; //先列后行
}

justify-items 属性，align-items 属性，place-items 属性

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下），place-items 属性是他们两个的简写属性。
属性值有
start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。

justify-content 属性，align-content 属性，place-content 属性

这些属性表示整个内容区域在容器里面的水平垂直位置
属性值有：
start
end
center
stretch
space-around每个项目两侧的间隔相等
space-between项目与项目的间隔相等，项目与容器边框之间没有间隔
space-evenly;项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔