图文并茂搞懂CSS3中的布局

举报
lwq1228 发表于 2021/07/09 11:55:27 2021/07/09
【摘要】 在CSS3推出之前，CSS一直没有针对布局的语法，大家都是在用各种技巧解决问题，早期是用table来布局，令HTML文件中充斥着与内容无关的标签，后来进化到用div布局，但又滥用了float，直至CSS3推出了flex布局和grid布局，才算从语法层面提供了解决方案。

在CSS3推出之前，CSS一直没有针对布局的语法，大家都是在用各种技巧解决问题，早期是用table来布局，令HTML文件中充斥着与内容无关的标签，后来进化到用div布局，但又滥用了float，直至CSS3推出了flex布局和grid布局，才算从语法层面提供了解决方案。

1、flex布局

若要使用flex布局，需先在父元素上声明display: flex;，这样它的所有直系子元素就成为flex元素。

1.1、居中

在flex布局出现之前，让一个元素在容器中居中的方法有很多种，充满各种技巧，但在flex中，居中是非常简单的。

1.1.1、样例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            font-size: 16px;
            width: 10em;
            height: 10em;
            background-color: skyblue;
            display: flex;
            margin: 2em;
            background-image: linear-gradient(transparent 50%, darkgreen calc(50% + 1px), transparent calc(50% + 1px)),
            linear-gradient(to right, transparent 50%, darkgreen calc(50% + 1px), transparent calc(50% + 1px));
            background-size: 10em, 10em;
        }

        div span {
            width: 7em;
            height: 7em;
            background-color: hsla(0, 100%, 72%, 0.8);
            border-radius: 50%;
        }

        div:nth-child(1) {
            align-items: center;
        }

        div:nth-child(2) {
            justify-content: center;
        }

        div:nth-child(3) {
            align-items: center;
            justify-content: center;
        }

    </style>
</head>
<body>
<figure>
    <div>
        <span></span>
    </div>
    <div>
        <span></span>
    </div>
    <div>
        <span></span>
    </div>
</figure>
</body>
</html>

1.1.2、效果图

1.1.3、说明

让一个元素在容器中垂直居中、水平居中和垂直水平居中。

用background-image和background-size为容器生成十字形的参考线，容器用蓝色背景，子元素是红色的圆。

分别设置3个容器中子元素的居中方式，align-items: center;表示垂直居中，justify-content: center;表示水平居中，这两个属性一起使用，即align-items:center; justify-content: center;就表示垂直水平居中（居于容器正中）。

1.2、横向排列

1.2.1、样例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            font-size: 16px;
            display: flex;
            align-items: center;
            width: 35em;
            height: 7em;
            background-color: lightblue;
            margin: 2em;
        }

        div span {
            width: 5em;
            height: 5em;
            background-color: darkcyan;
            border-radius: 50%;
        }

        div:nth-child(1) {
            justify-content: flex-start;
        }

        div:nth-child(2) {
            justify-content: flex-end;
        }

        div:nth-child(3) {
            justify-content: space-between;
        }

        div:nth-child(4) {
            justify-content: space-around;
        }

    </style>
</head>
<body>
<div class="container">
    <span></span>
    <span></span>
    <span></span>
</div>
<div class="container">
    <span></span>
    <span></span>
    <span></span>
</div>
<div class="container">
    <span></span>
    <span></span>
    <span></span>
</div>
<div class="container">
    <span></span>
    <span></span>
    <span></span>
</div>
</body>
</html>

1.2.2、效果图

1.2.3、说明

分别设置4个容器的中子元素的排列方式。
justify-content: flex-start表示居左；
justify-content: flex-end表示居右；
justify-content: space-between表示首尾的两个元素挨着容器边缘，中间的其他元素平均排列；
justify-content: space-around表示首尾的两个元素与容器边框的距离是元素之间间距的一半，各元素平均排列。

1.3、纵向排列

当子元素纵向排列时，在容器中增加flex-direction: column;属性即可。

1.3.1、样例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            display: flex;
        }

        div {
            font-size: 16px;
            display: flex;
            align-items: center;
            width: 7em;
            height: 25em;
            background-color: lightblue;
            margin: 2em;
            flex-direction: column;
        }

        div span {
            width: 5em;
            height: 5em;
            background-color: darkcyan;
            border-radius: 50%;
        }

        div:nth-child(1) {
            justify-content: flex-start;
        }

        div:nth-child(2) {
            justify-content: flex-end;
        }

        div:nth-child(3) {
            justify-content: space-between;
        }

        div:nth-child(4) {
            justify-content: space-around;
        }

    </style>
</head>
<body>
<div class="container">
    <span></span>
    <span></span>
    <span></span>
</div>
<div class="container">
    <span></span>
    <span></span>
    <span></span>
</div>
<div class="container">
    <span></span>
    <span></span>
    <span></span>
</div>
<div class="container">
    <span></span>
    <span></span>
    <span></span>
</div>
</body>
</html>

1.3.2、效果图

1.3.3、说明

CSS代码延用1.2的代码，其中，div span和div-nth-child(n)都没有变化，只是div容器增加了flex-direction: column;属性，并且调换了div容器width和height的值。最上面的body { display: flex }是为了使4个容器横向排列。

1.4、轴

flex布局没有使用left、right、top、bottom这些方位词，而是引入了轴的概念。所谓轴，就是像数轴那样的有方向的线，用两条数轴可以定义一个平面直角坐标系，所以flex布局就有了“主轴”和“交叉轴”的概念，“主轴”是子元素延伸的方向，“交叉轴”是与“主轴”垂直的轴。在一条轴上，flex-start代表轴的起点位置，flex-end代表轴的终点位置。如果轴是从左到右方向的，那么flex-start和flex-end就分别代表左端和右端，而如果轴是从上到下方向的，那么flex-start和flex-end就分别代表顶端和底端。

flex-direction的用途是设置主轴的方向，默认值是row，表示从左到右延伸，另一个常用值就是column，表示从上到下延伸，定义了主轴的方向，同时也就定义了交叉轴的方向。

严格地说，justify-content: center;表示子元素在主轴方向上居中，而align-items: center;表示子元素在交叉轴方向上居中。随着主轴方向的变化，这两个属性的含义会发生变化，如下表所示。

主轴方向 flex-direction justify-content: center align-items: center
从左到右 row 水平居中 垂直居中
从上到下 column 垂直居中 水平居中

2、grid布局

flex布局本质上是令所有子元素排列在一条轴线上，尽管在子元素较多时可以回行显示，但逻辑上仍是同一行，就像一个

标签中有很长一段文本，尽管回行显示了，但逻辑上仍是一段文本。如果子元素要布局成行列形式的矩阵，flex就不能实现了，于是grid布局应运而生。grid布局的思路是对早年间table布局的升华，即把网页看成有若干行和列的网格，然后让各元素分别与网络线对齐。若要使用grid布局，需先在父元素上声明display: grid;，这样它的所有直系子元素就会成为grid元素。

2.1、样例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-gap: 3em;
            padding: 5em;
        }

        .container {
            font-size: 10px;
            display: grid;
            grid-gap: 1em;
            background-color: lightblue;
            justify-items: center;
            align-items: center;
        }

        .container span {
            width: 5em;
            height: 5em;
            border-radius: 50%;
            background-color: darkcyan;
        }

        .container:nth-child(1) {
            grid-template-columns: repeat(4, 1fr);
        }

        .container:nth-child(2) {
            grid-template-columns: repeat(3, 1fr);
        }

        .container:nth-child(3) {
            grid-template-columns: repeat(2, 1fr);
        }

    </style>
</head>
<body>
<div class="container">
    <span></span><span></span><span></span><span></span><span></span><span></span>
    <span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div class="container">
    <span></span><span></span><span></span><span></span><span></span><span></span>
    <span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div class="container">
    <span></span><span></span><span></span><span></span><span></span><span></span>
    <span></span><span></span><span></span><span></span><span></span><span></span>
</div>
</body>
</html>

2.2、效果图

2.3、说明

每个子元素是一个绿色的圆，并在容器中声明使用grid布局，其中grid-gap的意思是子元素之间的间隔。

grid-template-columns用于规定每一行要分成几列，以及每列的尺寸，repeat(4, 1fr)表示把一行平均分成4份，1fr是一个长度单位，表示平分之后的1份的宽度。

第1组容器的grid-template-columns属性值是repeat(4, 1fr)，因为一共有12个子元素，每行4个元素，所以组成了4列3行的矩阵；
第2组容器的grid-template-columns属性值是repeat(3, 1fr)，表示把一行平分成3份，这样就组成了3列4行的矩阵；
类似地，第3组容器组成了2列6行的矩阵。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
CSS HTML 容器
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入