CSS布局方式之弹性布局和网格布局 | 青训营笔记

Milchstra
152 阅读5分钟

CSS（层叠样式表）提供了多种布局方式，用于控制网页中元素的排列和定位。常见的有上篇文章讲解的标准流布局和定位布局，还有这篇文章要讲解的弹性布局和网格布局。

弹性布局（Flex）

弹性盒布局（也叫 Flex 布局）是一种一维的布局模型，通过设置容器的 display 属性为 flex 或 inline-flex（前者使容器成为块级弹性容器，后者使其成为内联弹性容器），可以轻松地控制容器内子元素（称为弹性项目）在水平或垂直方向上的排列、对齐和分配空间等。

常用属性

  1. display:

    • display: flex;：定义一个flex容器，使其子元素成为flex项（flex items）。
    • display: inline-flex;：定义一个内联flex容器。

  2. flex-direction:

    • 控制主轴的方向（即flex项的排列方向）。
    • row（默认值）：主轴水平，从左到右。
    • row-reverse：主轴水平，从右到左。
    • column：主轴垂直，从上到下。
    • column-reverse：主轴垂直，从下到上。

  3. flex-wrap:

    • 控制flex项是否应该在一行或一列内换行。
    • nowrap（默认值）：不换行。
    • wrap：换行，第一行在上方/左边。
    • wrap-reverse：换行，第一行在下方/右边。

  4. justify-content:

    • 控制flex项在主轴上的对齐方式。
    • flex-start（默认值）：对齐到行的开头。
    • flex-end：对齐到行的末尾。
    • center：居中对齐。
    • space-between：平均分布，两端对齐。
    • space-around：平均分布，每一项之间的空间相等。
    • space-evenly：所有空间都相等。

  5. align-items:

    • 控制flex项在交叉轴上的对齐方式。
    • flex-start：对齐到交叉轴的开始。
    • flex-end：对齐到交叉轴的结束。
    • center：居中对齐。
    • baseline：基于基线对齐。
    • stretch（默认值）：拉伸以填充容器。

  6. align-content:

    • 控制多行flex项在交叉轴上的对齐方式。
    • flex-start：对齐到交叉轴的开始。
    • flex-end：对齐到交叉轴的结束。
    • center：居中对齐。
    • space-between：平均分布，两端对齐。
    • space-around：平均分布，每一项之间的空间相等。
    • stretch（默认值）：拉伸以填充容器。

项属性（应用于flex项）

  1. order:

    • 控制flex项的排列顺序。
    • 默认值为0，数值越小，排列越靠前。

  2. flex-grow:

    • 控制flex项的放大比例。
    • 默认值为0，即如果空间有剩余，flex项不会放大。

  3. flex-shrink:

    • 控制flex项的缩小比例。
    • 默认值为1，即如果空间不足，flex项会缩小。

  4. flex-basis:

    • 控制flex项在主轴上的初始大小。
    • 默认值为auto，即flex项的原始大小。

  5. flex:

    • 是flex-grow、flex-shrink和flex-basis的简写。
    • 可以设置为flex: auto（即flex-grow: 1、flex-shrink: 1、flex-basis: auto）或flex: none（即flex-grow: 0、flex-shrink: 0、flex-basis: auto）。

  6. align-self:

    • 允许单个flex项覆盖默认的align-items值。
    • 可以设置为auto（继承父容器的align-items值）、flex-start、flex-end、center、baseline或stretch。

代码展示

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
       .flex-container {
            display: flex;
            justify-content: center;
            background-color: lightgray;
            padding: 10px;
        }
       .flex-item {
            background-color: lightblue;
            width: 100px;
            height: 100px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">项目1</div>
        <div class="flex-item">项目2</div>
        <div class="flex-item">项目3</div>
    </div>
</body>
</html>

在浏览器中查看，会发现三个 <div> 作为弹性项目在 .flex-container 这个弹性容器内沿水平方向（默认主轴方向为 row）居中对齐排列，且每个项目之间有一定的间隔（由 margin 属性设置），背景颜色等样式按设定显示，体现了 Flex 布局方便控制元素排列和对齐的特点。

image.png

网格布局（Grid）

Grid网格布局，提供了带有行和列的基于网格的布局系统（类似二维坐标轴）。由容器和项目组成，容器是父元素，项目只能是容器的顶层子元素（和父元素紧挨的那层子元素）。容器根据列和行分成均匀网络，然后通过控制行、列、间隙设置网格大小，项目通过每个网格编号设置位置和大小。给父元素设置display : grid / inline-grid 变成网格容器。

常用属性

  1. display:

    • display : grid：定义一个元素为grid容器，使其子元素成为grid items。

  2. grid-template-columns:

    • 定义网格的列的大小和数量。
    • 可以指定固定的宽度（如100px）、百分比（如25%）或者使用fr单位表示可用空间的比例。
    • 例如：grid-template-columns: 100px 1fr 2fr;

  3. grid-template-rows:

    • 定义网格的行的大小和数量。
    • 类似于grid-template-columns，区别是作用于行。
    • 例如：grid-template-rows: 50px auto;

  4. grid-template-areas:

    • 使用名称定义网格区域，可在CSS中引用。
    • 例如： 
      grid-template-areas:
  "header header header"
  "main main sidebar"
  "footer footer footer";
    • 每个字符串代表一个单元格，空格分隔列，换行分隔行。

  5. grid-row-gap 和 grid-column-gap:

    • 分别设置行和列之间的间隙。
    • 例如：grid-row-gap: 10px; 和 grid-column-gap: 20px;

  6. justify-items:

    • 控制grid items在容器内的水平对齐方式。
    • 可以设置为stretch、start、end、center等。

  7. align-items:

    • 控制grid items在容器内的垂直对齐方式。
    • 可以设置为stretch、start、end、center等。

  8. place-items:

    • 是justify-items和align-items的简写属性。

  9. grid-auto-flow:

    • 控制网格的自动放置算法。
    • row（默认值）表示自动沿着行方向放置。
    • column表示自动沿着列方向放置。
    • dense表示尝试填充空闲空间，防止跳跃。

项属性（应用于grid items）

  1. grid-column:

    • 指定grid项应该占据哪些列。
    • 例如：grid-column: 1/3;表示从第1列开始，跨越到第3列（不包含第3列）。

  2. grid-row:

    • 指定grid项应该占据哪些行。
    • 例如： grid-row: 2/4;表示从第2行开始，跨越到第4行（不包含第4行）。

  3. grid-area：

    • 使用在grid-template-areas中定义的名称来放置grid项。
    • 例如：grid-area: header。

代码展示

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
     .block-grid-container {
            display: grid;
            background-color: lightgray;
            padding: 10px;
        }

     .inline-grid-container {
            display: inline-grid;
            background-color: lightyellow;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="block-grid-container">
        <div>项目1</div>
        <div>项目2</div>
    </div>
    <div class="inline-grid-container">
        <div>项目3</div>
        <div>项目4</div>
    </div>
    <p>这是一段普通文本，展示与内联网格容器的排列关系。</p>
</body>
</html>
avatar
文章
阅读
粉丝