导航：首页 > 开发技术 >

Flex布局和Grid布局实例分析

发表于：2024-11-29 作者：千家信息网编辑

千家信息网最后更新 2024年11月29日，本文小编为大家详细介绍"Flex布局和Grid布局实例分析"，内容详细，步骤清晰，细节处理妥当，希望这篇"Flex布局和Grid布局实例分析"文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来

千家信息网最后更新 2024年11月29日Flex布局和Grid布局实例分析

本文小编为大家详细介绍"Flex布局和Grid布局实例分析"，内容详细，步骤清晰，细节处理妥当，希望这篇"Flex布局和Grid布局实例分析"文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

　　flex布局是一个网页布局

　　容器的属性

　　1.display:flex/inline-flex

　　2.flex-direction决定主轴的方向（即项目的排列方向）

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

　　row（默认值）：主轴为水平方向，起点在左端。

　　row-reverse：主轴为水平方向，起点在右端。

　　column：主轴为垂直方向，起点在上沿。

　　column-reverse：主轴为垂直方向，起点在下沿。

　　3.flex-wrap决定换不换行，默认不换行

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

　　4.flex-flow是flex-direction和flex-wrap的简写方式

　　flex-flow:||;

　　5.justify-content决定了项目在主轴上的对齐方式

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

　　flex-start（默认值）：左对齐

　　flex-end：右对齐

　　center：居中

　　space-between：两端对齐，项目之间的间隔都相等。

　　space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

　　6.align-item定义垂直位置，可以通过这个定义垂直居中

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

　　flex-start：交叉轴的起点对齐。

　　flex-end：交叉轴的终点对齐。

　　center：交叉轴的中点对齐。

　　baseline:项目的第一行文字的基线对齐。

　　stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

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

　　flex-start：与交叉轴的起点对齐。

　　flex-end：与交叉轴的终点对齐。

　　center：与交叉轴的中点对齐。

　　space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

　　space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

　　stretch（默认值）：轴线占满整个交叉轴。

　　grid布局很好，但是兼容性现在并不是很好，测试了几个浏览器，支持谷歌、火狐、Opera，不支持safari，IE10以下，360，QQ浏览器

　　一、网格容器

　　1.display:grid/grid-inline

　　2.grid-template-columns和grid-template-rows属性可以显式的设置一个网格的列和行

　　fr单位可以帮助我们创建一个弹列的网格轨道。它代表了网格容器中可用的空间（就像Flexbox中无单位的值）

　　grid-template-columns:1fr1fr2fr

　　minmax()函数来创建网格轨道的最小或最大尺寸。minmax()函数接受两个参数：第一个参数定义网格轨道的最小值，第二个参数定义网格轨道的最大值。可以接受任何长度值，也接受auto值。auto值允许网格轨道基于内容的尺寸拉伸或挤压

　　grid-template-rows:minmax(100px,auto);

　　grid-template-columns:minmax(auto,50%)1fr3em;

　　repeat()可以创建重复的网格轨道。这个适用于创建相等尺寸的网格项目和多个网格项目。repeat()接受两个参数：第一个参数定义网格轨道应该重复的次数，第二个参数定义每个轨道的尺寸。

　　grid-template-rows:repeat(3,1fr);

　　grid-template-columns:30pxrepeat(3,1fr)30px;

　　二、间距

　　1.grid-column-gap创建列与列之间的间距

　　2.grid-row-gap创建行与行之间的间距

　　3.grid-gap

　　grid-gap是grid-row-gap和grid-column-gap两个属性的缩写，如果它指定了两个值，那么第一个值是设置grid-row-gap的值，第二个值设置grid-column-gap的值。如果只设置了一个值，表示行和列的间距相等，也就是说grid-row-gap和grid-column-gap的值相同。

　　三、网格线

　　1.【grid-row-start】【grid-row-end】【grid-column-start】【grid-column-end】

　　通过网格线可以定位网格项目。网格线实际上是代表线的开始、结束，两者之间就是网格列或行。每条线是从网格轨道开始，网格的网格线从1开始，每条网格线逐步增加1

　　grid-row-start:2;

　　grid-row-end:3;

　　grid-column-start:2;

　　grid-column-end:3;

　　2.【grid-row】【grid-column】

　　grid-row是grid-row-start和grid-row-end的简写。grid-column是grid-column-start和grid-column-end的简写。如果只提供一个值，则指定了grid-row-start(grid-column-start)值；如果提供两个值，第一个值是grid-row-start(grid-column-start)的值，第二个值是grid-row-end(grid-column-end)的值，两者之间必须要用/隔开

　　grid-row:2;

　　grid-column:3/4;

　　3.关键词span后面紧随数字，表示合并多少个列或行

　　grid-row:1/span3;

　　grid-column:span2;

　　4.【grid-area】指定四个值，第一个值对应grid-row-start，第二个值对应grid-column-start，第三个值对应grid-row-end，第四个值对应grid-column-end

　　grid-area:2/2/3/3;

　　5.网格线命名

　　分配网格线名称必须用方括号[网格线名称]，然后后面紧跟网格轨道的尺寸值。

　　grid-template-rows:[row-1-start]1fr[row-2-start]1fr[row-2-end];

　　grid-template-columns:[col-1-start]1fr[col-2-start]1fr[col-3-start]1fr[col-3-end];

　　使用repeat()函数可以给网格线分配相同的名称。