纯 CSS Flex Box 响应式设计 - 故障动画

使用 Flex Box，我们可以轻松地让我们的网页充当响应式容器

首先，我们将快速创建一个包含以下 HTML 的文件

<div class="viewport flex-parent flex-col">
        <div class="nav flex-parent space-around">
            <div class="box-1">div>
            <div class="box-2">div>
            <div class="box-3">div>
        div>
        <div class="content flex-parent">
            <div class="sidebar-left">div>
            <div class="main-area">div>
            <div class="sidebar-right">div>
        div>
        <div class="footer flex-parent space-evenly">
            <div class="box-4">div>
            <div class="box-5">div>
            <div class="box-6">div>
        div>
    div>

这就是我们的整个页面

CSS

我们要做的第一件事是对文档中的所有元素进行基本重置。这会将所有内容设置为边框框大小并删除所有边距和填充。

*{
     
        box-sizing: border-box;
        margin: 0;
        padding: 0;
}

.viewport

我们现在可以创建viewport类。我们希望这个元素占据设备屏幕内的所有可用空间。
只是为了强调视口的位置，我们还将给它一个大的黑色边框

    .viewport{
     
        min-height: 100vh;
        min-width: 100%;
        border: 5px solid black;
    }

接下来，我们要让viewport具有响应式。.viewport现在是一个 Flex Box 容器！

    .flex-parent{
     
        display: flex;
    }

默认情况下 Flex Box 容器垂直显示，但我希望我们的viewport flex-parent元素水平显示。我们可以使用以下 flex 属性来实现这一点。

    .flex-col{
     
        flex-direction: column;
    }

这就是 flex box 容器。

现在我们可以开始创建 flex 里面的盒子了。

.nav

第一个子元素将是.nav这是我们的一般标题区域。让我们制作100%容器的宽度和高度的宽度20vh。

    .nav{
     
        min-width: 100%;
        min-height: 20vh;
        border: 5px dashed blue;
    }

因为我们想在里面放置元素，所以.nav我们将给它类.flex-parent，我们还将在这里演示 Flex Box 的一个关键方面。

如果你曾经尝试过不使用 Flex Box 或 CSS 网格而使用纯 CSS 来定位某些东西，那么你就会知道要做到这一点有多困难。幸运的是，Flex Box 有一个名为的属性justify-content，可以通过多种方式为我们做到这一点。

.space-around

我们将使用以下代码在每个元素周围放置空白。

    .space-around{
        justify-content: space-around;
    }

.space-evenly

当我们在这里时，我们将创建另一个类供以后使用space-evenly，除了使用它的工作原理space-around与一个主要区别类似。随着space-evenly白色的左侧最远和最右边的元素的权利也将是间隔分布的一部分！

    .space-evenly{
        justify-content: space-evenly;
    }

该justify-content处理我们的main axis. 在这种情况下是x axisor horizontal axis。

.nav 内部元素

现在我们可以去实现里面的元素了 .nav

我希望能够在不影响另一个元素的情况下轻松更改一个元素的值。为此，我们将为每个元素创建一个不同的类。这不是完全必要的，但可以减轻以后的压力。

    .box-1{
        min-width: 20vw;
        background-color: yellow;
    }

    .box-2{
        min-width: 20vw;
        background-color: purple;
    }

    .box-3{
        min-width: 20vw;
        background-color: red;
    }

看一看！内容不会从页面溢出，内部的所有内容都.nav随屏幕大小而变化！

我们现在可以设置其余元素的样式！

首先我们将.content和.footer放到页面上

.content

    .content{
        min-width: 100%;
        min-height: 80vh;
        border: 5px dashed orange;
    }

.footer

    .footer{
        min-width: 100%;
        min-height: 20vh;
        border: 5px solid cyan;
    }

.content 内部元素

.sidebar-left

    .sidebar-left{
        min-width: 20%;
        background: teal;
    }

.main-area

    .main-area{
        min-width: 60%;
        background: green;
    }

.sidebar-right

    .sidebar-right{
        min-width: 20%;
        background: blue;
    }

.footer 内部元素

    .box-4{
        min-width: 15%;
        background: pink;
    }

    .box-5{
        min-width: 30%;
        background: maroon;
    }

    .box-6{
        min-width: 20%;
        background: black;
    }

结果

电脑

平板

手机

最后

我希望你对 Flex Box 是什么以及它如何更好地帮助我们轻松地进行响应式设计有更好的了解