flex布局与grid布局

最新推荐文章于 2025-06-08 09:03:34 发布

原创最新推荐文章于 2025-06-08 09:03:34 发布 · 529 阅读

CC 4.0 BY-SA版权

本文详细介绍了CSS的多种布局方式。包括position、float、display布局，重点讲解了flex和grid布局。flex布局可通过多个属性控制项目位置和比例；grid布局能将网页划分成网格，通过众多属性指定行与列、设置间隔、定义区域等，实现多样布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css布局

position布局

relative:相对于原位置来调整top，right，left，bottom且不会影响其他元素。

fixed：相对于视窗来定位；

absolute：相对于最近的“positioned”祖先元素除了static定位。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素

float布局

使用漂浮后还是相对于父元素定位，但是可以溢出父元素；而且不会对文字造成影响，如果不溢出父元素的话，文字自动包围浮动块级元素。

另外浮动元素会使块级元素失去display：block；使两个会计元素位列与同一行。

若要是使浮动元素不溢出盒子，则需要令父元素盒子加上样式overflow:auto;（但是会有滚动条一个缺点是，在外部元素上使用边距和填充的某些组合可能会导致滚动条出现，但这可以通过将边距和填充放在另一个包含父元素的元素上来解决。）清理浮动

display布局

主要是改变行,块状态

flex布局

位置

flex-direction属性

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

flex-wrap属性

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

align-items属性

align-items属性定义项目在交叉轴上如何对齐。

align-self属性（控制单个项目的位置）

比例

flex-grow属性（存在剩余空间时起作用）

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink属性（空间不足时起作用）

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

Flex 布局教程：实例篇

grid布局

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。（关键是要指定行与列）

grid-template-columns属性

定义每一列的列宽

grid-template-rows 属性

定义每一行的行高。

auto-fill 关键字

单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

fr 关键字

如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

grid-row-gap 属性

grid-row-gap属性设置行与行的间隔（行间距）

grid-column-gap 属性

grid-column-gap属性设置列与列的间隔（列间距）

grid-template-areas 属性

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
                       //上面代码先划分出9个单元，然后将其定名为a到i的九个区域，分别对应这九个单元格。
}