【CSS】常用flex布局和grid布局

最新推荐文章于 2024-06-05 15:32:53 发布

ClearStari99

最新推荐文章于 2024-06-05 15:32:53 发布

阅读量380

点赞数

分类专栏： CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/JackCao_Grass/article/details/130097714

版权

本文详细介绍了CSS中的flex布局和grid布局。通过实例展示了（1）flex布局的HTML和CSS代码，以及最终实现的效果；（2）grid布局的HTML和CSS实现，同样附带了布局效果展示。

摘要由CSDN通过智能技术生成

（1）flex布局

（1.1）HTML代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="flex-container">
        <div class="flex-item">
            <h1>CSS：层叠样式表</h1>
            <p>CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。
                通过使用 CSS 我们可以大大提升网页开发的工作效率！
                在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。
                CSS3 现在已被大部分现代浏览器支持，而下一版的 CSS4 仍在开发中。</p>
        </div>
        <div class