CSS 布局模式 | 豆包MarsCode AI刷题

前言

在网页设计和前端开发中，布局是至关重要的环节。随着技术的不断进步，CSS 提供了多种布局模式，从早期的传统布局方式（如浮动和定位）到现代的 Flex 布局 和 Grid 布局。这些布局技术各有优势，能够帮助我们实现灵活、响应式的网页结构。

面对如此丰富的选择，许多开发者可能会感到困惑：何时应该使用哪种布局模式？Flexbox 和 Grid 有什么区别？传统的浮动布局是否已经过时？

本文将带你深入探索 CSS 的布局模式，详细解读 Flexbox 和 Grid 这两种现代布局方式，同时回顾 传统布局 的基础知识。通过对比和实际示例，你将了解如何在不同场景中选择合适的布局方式，从而提高页面设计的效率与灵活性。

什么是布局模式？

定义：

简单来说，就是通过 CSS 定义定义元素在页面上的排列方式与布局结构。

常见的布局模式：

• Float 布局：通过设置元素的 float 属性，可以将元素向左或向右浮动。

• Position 布局：指定一个元素在网页上的位置，基于五个属性值来决定：absolute、relative、fixed、static、sticky。

• Flex 布局：弹性布局，一维布局系统，通过主轴和交叉轴来决定子元素排列方式。

• Grid 布局：网格布局，二维布局系统，grid 布局分为行和列产生单元格，根据单元格来指定项目的位置。

Float 和 Position 作为传统布局模式，它们的局限性导致不得不寻找更好的替代方案，Flex 布局和 Grid 布局的出现，为开发者提供了更简单，灵活的布局模式，传统布局虽然逐渐被 Flex 布局和 Grid 布局所取代，但是理解传统布局模式的工作原理也是极为重要的，在某些情况下，它们仍然有特别的优势，所以，接下来，我们会基于传统布局模式和现代布局模式逐一介绍。

Flexbox 基本原理：弹性布局的核心概念

定义

Flex 布局是弹性布局，相较于传统布局的方式，它通过主轴和交叉轴来决定元素的排列方式，提供了更大的灵活性，比如实现垂直居中等一系列传统布局实现复杂的方案都可以轻松解决。

容器

任何一个容器都可以指定为 flex 布局，被设定为 flex 布局的元素称为容器。

.div{
    display:flex;
}

代码中的 div 元素就是一个容器，它可以指定六个属性，分别是：

• flex-direction：决定主轴的方向(row、row-reverser、column、column-reverser)，依次水平，垂直

• flex-warp：子元素排在一条轴线上，决定子元素排练是否换行(nowarp、warp、warp-reverse)，后俩个值决定第一行在上面还是下面

• flex-flow：flex-direction和flex-warp的合并写法，默认值为(row，nowarp)

• justifly-content：决定子元素在主轴上的对齐方式，可以为(flex-start、center、flex-end、space-between、space-around)，第四个属性为俩端对齐，项目间隔相等，第五个为每个项目俩侧间隔都相等

• align-item：决定子元素在交叉轴上的对齐方式，可以为(flex-start、center、flex-end、stretch、baseline)，第四个属性为占满整个容器，第五个为项目第一行文字基线对齐。

• align-content：决定多个交叉轴轴线对齐方式，如果项目只有一根轴线则不起作用。可以为((flex-start、center、flex-end、stretch、space-between、space-around)

容器成员

被设定为容器的元素，它的子元素称为容器成员。

    <div class="father">
        <div class="son"></div>
        <div class="item"></div>
    </div>

如上述代码，类名为 son 和 item 的元素都为容器成员，可以为容器成员指定六个属性：

• order：决定子元素排列顺序，数值越小排列越靠前。

.item {
    order: <integer>;
}

• flex-grow：定义子元素的放大比例，默认为0

.item {
    flex-grow: <number>; /* default 0 */ 1 2 3...
}

• flex-shrink：定义子元素的缩小比例，默认为1，如果空间不足，该子元素将会缩小

.item {
    flex-shrink: <number>; /* default 1 */
}

• flex-basis：定义子元素占据的固定空间，也就是每个主轴的长度。

.item {
    flex-basis: <length> | auto; /* default auto */
}

auto为项目本来大小，也可以设定 100px

• flex：是flex-grow, flex-shrink 和 flex-basis的简写，

.item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
/* 默认值为：0 1 auto */

• align-self：允许单个子元素与其他子元素不同的对齐方式，可以覆盖 align-item 属性

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
/* 默认值：auto，表示继承父元素 align-item 的属性 */

Grid 简介：网格布局系统

定义

Grid 布局将网页划分成多个网格，可以任意组合成不同的网格，做出各种各样的布局。

Grid 布局将容器划分成 行 和 列，产生单元格，所以它是一个二维布局。

基本概念

容器：采用网格布局的区域

项目：容器内部采用网格定位的顶层子元素

行：容器内部水平区域

列：容器内部的垂直区域

单元格：行和列的交叉区域

容器属性

1. display

• 指定某个容器为表格布局

.box{
    display:grid;
}

• grid-template-columns

• 定义每一列的列宽

.box{
    display: grid;
    grid-template-columns: 100px 100px 100px;
}

• grid-template-rows

• 定义每一行的行高

.box{
    display: grid;
    grid-template-rows: 100px 100px 100px;
}

• repeat()

• 简化重复值

.box{
    display: grid;
    grid-template-rows: repeat(3,33.3%);
    grid-template-columns: repeat(3,33.3%);
}

• 第一个参数为重复次数，第二参数为重复的值

• grid-row-gap

• 行与行之间的间隔

.box{
    display: grid;
    grid-row-gap: 20px;
}

• grid-column-gap

• 列与列之间的间隔

.box{
    display: grid;
    grid-column-gap: 20px;
}

• grid-gap

• 行和列间隔的简写

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

• grid-auto-flow

• 放置项目的顺序，默认row(先行后列)

.box{
    display: grid;
    grid-auto-flow: column;
}

• 上述代码是先列后行放置项目

• justify-items

• 设置项目在单元格内容中水平位置

.box{
    display:grid;
    justify-items: start | end | center | stretch;
}

• align-items

• 设置项目在单元格中的垂直位置

.box{
    display:grid;
    align-items: start | end | center | stretch;
}

• place-items

• 上述俩个属性的简写方式

• justify-content

• 整个内容区域在容器中水平位置

.box{
    display:grid;
    justify-content: start | end | center | stretch | space-around | space-between | space-     evenly;
}

• align-content

• 整个内容区域在容器中的垂直区域

.box{
    display:grid;
    align-content: start | end | center | stretch | space-around | space-between | space-       evenly;
}

• place-content

• 上述俩个属性的简写

项目属性

1. grid-column-start

• 左边框所在的垂直网格线

• grid-column-end

• 右边框所在的垂直网格线

.item {
    grid-column-start: 2;
    grid-column-end: 4;
}

• 这里代表项目 item 左边框在第二根垂直网格线，右边框在第四根垂直网格线。

• grid-row-start

• 上边框所在水平网格线

• grid-row-end

• 下边框所在水平网格线

.item-1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 4;
}

上述四种方法可以指定项目的位置。

如上述代码表示，项目1 左边框为第一根垂直网格线，右边框为第三根垂直网格线，上边框为第二根水平网格线，下边框为第四根水平网格线。

• grid-column

• grid-column-start和grid-column-end简写方式

• grid-row

• grid-row-start和grid-row-end的合并简写

• grid-area

• 指定项目放在哪一个区域

• justify-self

• 设置单个项目在单元格的水平位置

.item{
    justify-self: start | end | center | stretch;
}

• align-self

• 设置单个项目在单元格的垂直位置

.item{
    align-self: start | end | center | stretch;
}

• place-self

• 上述俩个属性的简写方式

传统布局方式：浮动与定位

浮动

定义：

浮动属性让元素浮动到容器左边或者右边，并且文本及其它行内元素都会围绕浮动元素排列。

float 属性值：

1. none(默认值)：

• 元素不浮动，按照文档流正常排列

.box{
    float:none;
}

• right：

• 元素浮动到容器右侧，后续元素会围绕着它的右侧排列

.box{
    float:left;
}

• left：

• 元素浮动到容器左侧，后续元素会围绕着它的左侧排列

.box{
    float:right;
}

清除浮动：

• clear属性：用于停止元素围绕浮动元素排列

.clear{
    clear:both;
}

常用于处理浮动布局结束后需要断开的地方。

定位

position 属性

定义元素在页面上的位置，该属性有五个值，分别为：

1. static：

• 默认值，根据源码顺序来决定元素的位置，元素与元素之间不产生重叠。

• absolute：

• 绝对定位，根据定位基点来决定元素的位置，它的定位基点为父元素，搭配 top、left、right、bottom去使用。

• 例如：子元素相对于父元素向下偏移 20 px。

#father {
    positon: relative;
}

#son {
    position: absolute;
    top: 20px;
}

注意：父元素的定位不能是 static 定位，否则，它的定位基点会变成整个 html 根。

• relative：

• 相对定位，根据定位基点来决定元素的位置，它的定位基点为元素的默认位置，搭配 top、left、right、bottom去使用。

• 例如：相对于元素默认位置向下偏移 20 px。

div {
    position: relative;
    top: 20px;
}

• fixed：

• 固定定位，根据定位基点来决定元素的位置，它的定位基点为浏览器窗口，搭配 top、left、right、bottom去使用。

• 例如：根据浏览器窗口向下偏移 20 px。

div {
    position: fixed;
    top: 20px;
}

• sticky：

• 粘性定位，根据用户滚动位置来定位，在 relative 和 fixed 之间来回切换，当页面滚动没有超出该元素时，它基于元素默认位置定位，当超出时，基于浏览器窗口定位，固定到某个位置。

选择合适的布局模式

Float（浮动布局）

适用场景：

• 用于传统布局，比如创建简单的列布局。

• 让图片和文本并排显示。

Position（定位布局）

适用场景：

• 需要绝对控制元素位置时使用，比如创建悬浮按钮、

• 用于粘性导航栏等元素，随着滚动而固定在页面的某个位置

• 对需要根据窗口大小变化和滚动的元素进行准确定位

Flex（弹性布局）

适用场景：

• 水平或垂直居中的导航栏、按钮组、卡片布局。

• 响应式设计中，适用于动态调整子元素的排列和大小。

Grid（表格布局）

适用场景：

• 复杂的二维布局，例如照片墙、仪表盘、网格状的内容展示页面。

• 创建对齐复杂、多行多列的布局，如后台管理系统页面。