使用 CSS 网格和 Flexbox 的响应式网页设计

使用 css 网格和 flexbox 的响应式网页设计

响应式网页设计是一种开发网站的方法，使其可以在各种设备和屏幕尺寸上正常运行。响应式设计不必为不同设备创建多个版本的网站，而是使用灵活的网格和布局、媒体查询和流畅的图像来跨所有平台提供更好的用户体验。

为什么响应式网页设计很重要？

随着世界各地越来越多的人使用手机和平板电脑浏览互联网，拥有响应式网站不再是一种选择，而是一种必需。响应式设计允许消费者无缝访问内容，无论他们使用什么设备，从而提高可用性。它还通过确保内容在视觉上连贯且易于跨设备阅读来改善用户体验，这可以减少挫败感并鼓励互动。此外，响应式设计可以保证网站面向未来，让它们适应新设备，而无需进行大量重新设计。

今天，我们将了解响应式网页设计的基础知识，并特别关注两种强大的 css 技术：flexbox 和 css grid。我们将使用带有彩色框和数字的简单网站来展示这些布局如何适应不同的屏幕尺寸。

响应式网页设计简史

自互联网诞生之初以来，响应式网页设计已经发生了很大变化。媒体查询，根据设备特征（例如屏幕尺寸、分辨率和方向）应用样式。 2000 年代初推出，flexbox 于 2012 年推出，css grid 于 2017 年采用。这些创新使设计人员能够在多种不同设备上创建适应性布局，为用户提供更好的体验。

使用 css 网格和 flexbox 创建响应式布局

现在，让我们看一些实际的例子，让我们了解 flexbox 和 css grid 是如何工作的。

响应式网格布局：颜色网格

我们将使用 css 网格创建一个简单的布局。

网格布局的 html:

    <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>color grid</title><link rel="stylesheet" href="styles.css"><p class="grid-container">
        <p class="grid-item" style="background-color: #ff5733;">1</p>
        <p class="grid-item" style="background-color: #33ff57;">2</p>
        <p class="grid-item" style="background-color: #3357ff;">3</p>
        <p class="grid-item" style="background-color: #ff33a1;">4</p>
        <p class="grid-item" style="background-color: #33fff1;">5</p>
        <p class="grid-item" style="background-color: #ffa133;">6</p>
    </p>

登录后复制

html:

html 标记创建一个响应式容器（网格容器）和具有不同数字和背景颜色的彩色框（网格项）。视口元标记允许布局在不同设备上缩放。

网格布局的css:

/* styles.css */
body {
    margin: 0;
    font-family: arial, sans-serif;
    background: #f0f0f0;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    padding: 20px;
}

.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    color: #fff;
    font-size: 2em;
    border-radius: 8px;
}

登录后复制

css:

网格布局的 css 使用不同的网格属性来提高响应速度。显示方式：网格；声明将带有 grid-container 类的元素设置为网格容器，以便我们可以利用网格提供的所有功能。网格模板列：repeat(auto-fit, minmax(100px, 1fr));属性定义网格中列的结构：它根据可用空间自动调整列数，每列的最小宽度为 100 像素，最大为可用空间的 1 分数 (1fr)。这种设计允许网格适应不同的屏幕尺寸，这样网格项目就不会溢出或产生难看的间隙。间隙：10px；属性对网格项应用一致的间距。最后，我们使用 display: flex; 堆叠 grid-item 元素。并将其内容居中 justify-content: center;和对齐项目：居中。这样，每个项目都组织良好且平衡。

响应式网页设计示例：网格布局

此网格布局使用：

1. 动态列数：网格自动调整列数以适应视口宽度，项目最小为 100px。
2. 灵活调整大小：自动调整让盒子在需要时重新排列和重新排列，让一切看起来更有条理。
3. 媒体查询：虽然实际上没有写在这里，但网格元素在不同屏幕尺寸下的行为方式通过使用响应式网格属性演示了媒体查询的概念。

响应式 flexbox 布局：颜色行

接下来，让我们使用 flexbox 创建一排简单的彩色框。

flexbox 布局的 html:

    <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>color row</title><link rel="stylesheet" href="styles.css"><p class="flex-container">
        <p class="flex-item" style="background-color: #ff5733;">1</p>
        <p class="flex-item" style="background-color: #33ff57;">2</p>
        <p class="flex-item" style="background-color: #3357ff;">3</p>
        <p class="flex-item" style="background-color: #ff33a1;">4</p>
    </p>

登录后复制

html:

与网格示例类似，此处的 html 创建一个弹性容器，其中包含显示彩色数字的弹性项目框。

flexbox 布局的 css :

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f5f5f5;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    gap: 10px;
}

.flex-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    color: #fff;
    font-size: 2em;
    border-radius: 8px;
}

登录后复制

css：
这里的 css 使用 flexbox 属性来创建适应各种屏幕尺寸的响应式布局。显示屏：柔性； .flex-container 中提供其子元素或（flex 项目）flexbox 功能。 flex-wrap：包裹；如果超过容器的宽度，属性允许项目流到多行。调整内容：居中；属性将弹性项目沿主轴居中，因此无论项目数量如何，都有一个平衡的布局。间隙：10px；属性在项目之间引入了统一的间距，从而改善了整体组织。每个.flex-item也是一个flex容器，使用display: flex;允许进一步对齐其内部内容，使用 justify-content: center; 垂直和水平居中；和对齐项目：中心；。高度固定尺寸：100px；宽度：100px；提供一致性，而这些属性的组合使布局具有令人愉悦的外观，同时适应不同设备的需求。

响应式网页设计示例：flexbox 布局

这个弹性盒布局展示了几个响应式设计特征。

1. flex wrapping：flex-wrap：包裹；属性使框在无法放入行时移动到下一行，以适应不同的视口宽度。
2. 居中项目：无论屏幕大小如何，项目都保持居中，从而改善整体呈现效果。
3. 固定尺寸：盒子具有特定的尺寸，但它们会根据可用空间进行包裹和重新调整，从而实现响应式布局。

css 网格和 flexbox 的比较

说到 css 布局设计，grid 和 flexbox 都是不错的选择，但它们的用途不同。 css 网格是一种二维布局系统，允许您创建具有行和列的复杂网格结构，非常适合需要精确控制两个维度的布局，例如在 web 应用程序或仪表板中。另一方面，flexbox 是一种一维布局模型，最适合沿单个轴（水平或垂直）分配空间，使其非常适合更简单的布局或较小的组件（如按钮或导航菜单）。虽然您可能会选择 grid 来实现全面的、结构化的布局，其中元素需要在两个轴上对齐，但 flexbox 将是您需要响应内容大小的自适应、流畅的布局的首选。最后，您的选择应该取决于您项目的具体需求；通常，将两者一起使用，互补，可以给您带来最佳效果。

结论

使用 css grid 和 flexbox，您可以创建在任何设备上看起来都很棒的自适应布局。这些示例说明了实现动态设计是多么简单。

现在轮到你了！尝试这些技术，修改颜色和布局设置，看看创建有趣且响应式的设计是多么简单。

“
来源：
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/css_grid.asp
https://developer.mozilla.org/en-us/docs/learn/css/css_layout
https://kinsta.com/blog/responsive-web-design/#4-flexbox-layout
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
https://blog.logrocket.com/css-flexbox-vs-css-grid/#:~:text=for%20a%20major%20layout%20style,helpful%20when%20working%20with%20rows.

以上就是使用 CSS 网格和 Flexbox 的响应式网页设计的详细内容，更多请关注叮当号网其它相关文章！