• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载
 访客
首页 » 网页设计 » CSS » 正文

如何使用 Flexbox 构建响应式、多级、粘性页脚

小码哥 • 2年前 (2022-08-18) • CSS

   在本教程中，我将向您展示如何使用 flexbox 创建一个响应式、多级、多列的页脚，无论如何它都会粘在页面底部。

我们要建造什么

这是我们正在构建的演示。查看全屏版本以正确欣赏其响应能力！

See the Pen  Responsive, Multi-Level, Sticky Footer with Flexbox by Envato Tuts+ (@tutsplus)  on CodePen.

随意添加一些内容， <div></div>看看这个页脚的粘性方面是如何工作的。

Flexbox 非常适合页脚

Flexbox 可以构建灵活的布局，自然地适应不同的视口大小。多级、多列的页脚是利用 flexbox 独特功能的一个很好的例子，特别是：

  • flex-grow 无论如何，该属性允许我们将页脚粘贴到页面底部，

  • 该flex-wrap 属性允许列根据用户设备的视口大小自动换行， 

  • 该justify-content 属性可以以不同的排列方式显示列（space-around、space-between、center等）。

一旦你探索了 flexbox 可以为你的页脚布局做什么，你就可以自由发挥创意，看看什么是可能的。页脚是帮助用户继续他们的旅程的理想场所；如果他们已到达页面底部但仍未找到所需内容，请考虑添加：

  • 详细导航

  • 号召性用语

  • 通讯注册

  • 社交链接

  • 令人放心的证明，例如奖励、表彰、（真正的）隐私徽章等。

  • 支持或在线帮助的链接

  • 品牌推广

  • 联系方式

  • 也许提醒您网站的个性，以提高微笑或鼓励用户值得一游

如何使用 Flexbox 构建响应式、多级、粘性页脚 第1张

Haswell 多页模板在页脚中为用户提供了大量选项方面做得很好

页脚结构

虽然也可以使用 css 网格创建页脚，但 flexbox 允许我们在彼此之上构建多个页脚级别，每个级别独立包装。我们将在本教程中创建的页脚具有三个级别，每个级别都是一个单独的 flex 容器：

  1. 主页脚：四列，最后一列是时事通讯注册表单，

  2. 社交页脚：以页面为中心的六个社交图标（此级别不会换行），

  3. 合法页脚：三列，前两列位于屏幕左侧，最后一列位于屏幕右侧。

如何使用 Flexbox 构建响应式、多级、粘性页脚 第2张

此外，页脚也会粘在页面底部——即使上面没有足够的内容。我们将通过使整个<body>标签成为基于列的弹性容器来实现这种粘性效果。

1.设置 html

让我们从 HTML 开始。我已将所有内容放入一个语义<footer> 标签中，并将三个页脚级别放入三个 <section>元素中。对于社交页脚，我使用了font Awesome图标字体。

<body>

    <div class="container"></div>

    <footer>

      <!-- Footer main -->

      <section class="ft-main">

        <div class="ft-main-item">

          <h2 class="ft-title">About</h2>

          <ul>

            <li><a href="#">services</a></li>

            <li><a href="#">Portfolio</a></li>

            <li><a href="#">Pricing</a></li>

            <li><a href="#">Customers</a></li>

            <li><a href="#">Careers</a></li>

          </ul>

        </div>

        <div class="ft-main-item">

          <h2 class="ft-title">Resources</h2>

          <ul>

            <li><a href="#">Docs</a></li>

            <li><a href="#">Blog</a></li>

            <li><a href="#">eBooks</a></li>

            <li><a href="#">Webinars</a></li>

          </ul>

        </div>

        <div class="ft-main-item">

          <h2 class="ft-title">Contact</h2>

          <ul>

            <li><a href="#">Help</a></li>

            <li><a href="#">Sales</a></li>

            <li><a href="#">Advertise</a></li>

          </ul>

        </div>

        <div class="ft-main-item">

          <h2 class="ft-title">Stay Updated</h2>

          <p>Subscribe to our newsletter to get our latest news.</p>

          <form>

            <input type="email" name="email" placeholder="Enter email address">

            <input type="submit" value="Subscribe">

          </form>

        </div>

      </section>

     

      <!-- Footer social -->

      <section class="ft-social">

        <ul class="ft-social-list">

          <li><a href="#"><i class="fab fa-facebook"></i></a></li>

          <li><a href="#"><i class="fab fa-twitter"></i></a></li>

          <li><a href="#"><i class="fab fa-instagram"></i></a></li>

          <li><a href="#"><i class="fab fa-github"></i></a></li>

          <li><a href="#"><i class="fab fa-linkedin"></i></a></li>

          <li><a href="#"><i class="fab fa-youtube"></i></a></li>

        </ul>

      </section>

     

      <!-- Footer legal -->

      <section class="ft-legal">

        <ul class="ft-legal-list">

          <li><a href="#">Terms &amp; Conditions</a></li>

          <li><a href="#">Privacy Policy</a></li>

          <li>&copy; 2019 Copyright Nowrap Inc.</li>

        </ul>

      </section>

    </footer>

</body>

2. 定义基本 CSS 样式

在开始布局之前，让我们设置一些基本的 CSS 样式，例如颜色、字体和间距。我使用了以下样式规则，但是，您可以使用与您的设计相匹配的任何其他样式。

* {

    box-sizing: border-box;

    font-family: ’Lato’, sans-serif;

    margin: 0;

    padding: 0;

}

ul {

    list-style: none;

    padding-left: 0;

}

footer {

    background-color: #555;

    color: #bbb;

    line-height: 1.5;

}

footer a {

    text-decoration: none;

    color: #eee;

}

a:hover {

    text-decoration: underline;

}

.ft-title {

    color: #fff;

    font-family: ’Merriweather’, serif;

    font-size: 1.375rem;

    padding-bottom: 0.625rem;

}

3.将页脚粘贴到页面底部

使用 flexbox，我们只需几行 CSS 就可以创建一个粘性页脚。下面的代码使页面的整个主体成为一个弹性容器，它至少是视口高度的 100% ( 100vh)。

body {

    display: flex;

    min-height: 100vh;

    flex-direction: column;

}

.container {

    flex: 1;    /* same as flex-grow: 1; */

}

真正的技巧在于将flex: 1;规则添加到.container元素（<footer>在 HTML 中）。flex属性是 flex-grow、flex-shrink和属性的简写flex-basis 。当它只有一个值时，它指的是flex-grow,flex-shrink并被flex-basis设置为其默认值。 

该flex-grow属性定义了当有太多正空间时，flex 容器内部会发生什么（即 flex 项目不跨越整个容器）。它的默认值是0这意味着所有剩余空间将在项目之间平均分配。因此，当我们设置 flex-grow 为时1，.container 将获得屏幕上的所有剩余空间。同时， <footer> 不会得到多余的空间，所以会自动下推到页面底部。

4. 排列主页脚

现在，页脚整齐地贴在页面底部，是时候对齐主页脚的列了。 

该.ft-main元素将是 flex 容器，该flex-wrap属性将让页脚根据视口大小包装成多行。为了防止列太窄，我还 200px为每个弹性项目设置了最小宽度。

.ft-main {

    padding: 1.25rem 1.875rem;

    display: flex;

    flex-wrap: wrap;

}

.ft-main-item {

    padding: 1.25rem;

    min-width: 12.5rem /*200px*/;

}

在较小的屏幕上，主页脚不使用任何特定的对齐属性。因此，flexbox 会自动将每一列对齐到主轴的起点（在默认情况下，主轴是屏幕的左侧）。 

但是，在更大的屏幕上，更精确地分配空间看起来会更好。所以，我已经设置justify-content为 space-around 中型和 space-evenly 大屏幕。当您创建另一种页脚布局时，我建议您使用不同的值进行一些实验， justify-content 以便您可以看到哪个最适合您的设计。

@media only screen and (min-width: 29.8125rem /*477px*/) {

    .ft-main {

        justify-content: space-around;

    }

}

@media only screen and (min-width: 77.5rem /*1240px*/ ) {

    .ft-main {

        justify-content: space-evenly;

    }

}

5. 设计时事通讯表格

主页脚的最后一列包含需要特别注意的时事通讯注册表单。我也为 <form>元素添加了 flexbox 布局，以便输入字段和提交按钮在所有视口上整齐排列。由于该flex-wrap: wrap;规则，当视口变得非常小时，提交按钮会很好地滑到输入字段下方。 

margin-top此外，当新闻通讯表单换行时，由于提交按钮上设置的属性，两个元素之间也会有一些空白。我还在 margin-top 输入字段中添加了相同的值，以便 flexbox 将其精确地显示在较大视口上的提交按钮旁边。

form {

    display: flex;

    flex-wrap: wrap;

}

input[type="email"] {

    border: 0;

    padding: 0.625rem;

    margin-top: 0.3125rem;

}

input[type="submit"] {

    background-color: #00d188;

    color: #fff;

    cursor: pointer;

    border: 0;

    padding: 0.625rem 0.9375rem;

    margin-top: 0.3125rem;

}

6. 排列社交页脚

创建社交页脚的布局相对简单，因为它只是几个小图标的无序列表。由于图标非常小，因此此页脚级别不需要换行。该justify-content: center;规则将其与每个屏幕尺寸的主轴中心对齐。

.ft-social {

    padding: 0 1.875rem 1.25rem;

}

.ft-social-list {

    display: flex;

    justify-content: center;

    border-top: 1px #777 solid;

    padding-top: 1.25rem;

}

.ft-social-list li {

    margin: 0.5rem;

    font-size: 1.25rem;

}

7. 对齐法律页脚

法律页脚包含三个元素：左侧的两个链接和右侧的版权声明。为了实现这种布局，我们可以使用与粘性页脚相同的 flexbox 技巧。在那里，我们flex: 1;在元素上使用了规则.container，因此 flexbox 将整个正空间分配给它，并将页脚推到页面的最底部。在这里，我们可以做同样的事情。 

虽然.ft-legal-list是基于行的弹性容器，而基于.container 列的弹性容器，但我们可以遵循相同的逻辑。如果我们设置flex-grow为1第二栏，它会自动将版权声明推送到屏幕右侧。 

在移动视口上，一切看起来也不错。在这种情况下，flexbox 将所有三个元素显示在彼此下方，并与屏幕左侧对齐。

.ft-legal {

    padding: 0.9375rem 1.875rem;

    background-color: #333;

}

.ft-legal-list {

    width: 100%;

    display: flex;

    flex-wrap: wrap;

}

.ft-legal-list li {

    margin: 0.125rem 0.625rem;

    white-space: nowrap;

}

/* one before the last child */

.ft-legal-list li:nth-last-child(2) {

    flex: 1;       /* same as flex-grow: 1; */

}

查看演示

就这样; 我们的多级、多列、响应式、粘性页脚已经完成！再次查看演示以提醒自己它在不同视口大小下的外观：

See the Pen  Responsive, Multi-Level, Sticky Footer with Flexbox by Envato Tuts+ (@tutsplus)  on CodePen.

结论

Flexbox 允许我们用比以前少得多的代码创建复杂的灵活布局。使用本教程中介绍的技术和技巧，您可以创建所需的任何页脚布局，具有任意数量的级别和列。 

flexbox 页脚的最大优点是您可以为每个级别使用不同的换行、大小和对齐规则。因此，您可以让页脚完全感知内容，而无需使用 javascript 或（许多）媒体查询。



文章目录
  • 我们要建造什么
  • Flexbox 非常适合页脚
  • 页脚结构
  • 1.设置 html
  • 2. 定义基本 CSS 样式
  • 3.将页脚粘贴到页面底部
  • 4. 排列主页脚
  • 5. 设计时事通讯表格
  • 6. 排列社交页脚
  • 7. 对齐法律页脚
  • 查看演示
  • 结论

    • 如无特殊说明，文章均为本站原创，如若转载，请注明出处：老吴教程
    视频资源部分来自互联网，勿轻易相信视频广告！请自行鉴别避免上当受骗！
    文章标题：如何使用 Flexbox 构建响应式、多级、粘性页脚
    文章地址：https://www.weixiaolive.com/en/index.php/post/91d26316.html

    相关推荐

      最新文章 | 热门文章 | 随机文章

    站长SO库
    源码
    阿里云