vux flexbox使用_如何使用Flexbox构建快速响应的多层粘性页脚

最新推荐文章于 2022-12-01 10:46:44 发布

daique1908

最新推荐文章于 2022-12-01 10:46:44 发布

阅读量185

点赞数

文章标签： css html java web css3

vux flexbox使用

在本教程中，我将向您展示如何使用flexbox创建响应式，多级，多列的页脚，无论该页脚如何。

我们将要建立的

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

随时向<div class="container"></div>添加一些内容，以了解此页脚的粘性方面也是如何工作的。

Flexbox非常适合页脚

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

flex-grow属性使我们无论如何都可以将页脚固定在页面底部，
flex-wrap属性可让列根据用户设备的视口大小自动换行，
justify-content属性使得可以按不同的排列方式显示列（ space-around ， space-between ， center等）。

探索完flexbox对页脚布局的作用之后，您将可以自由发挥创造力，并看到可能的方法。页脚是帮助用户继续前进的理想之地；如果他们已经到达页面底部，但仍然找不到他们想要的东西，请考虑添加：

详细导航
呼吁采取行动
电子报注册
社会联系
令人放心的证明，例如奖项，表彰，（真正的）隐私徽章等。
支持或在线帮助链接
品牌推广
联系方式
可能提醒您网站的个性，以提高微笑或鼓励用户值得一游

页脚结构

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

主要页脚：四列，最后一列为简报注册表单，
社交页脚：页面上居中放置六个社交图标（此级别不会自动换行），
合法页脚：三列，前两列位于屏幕的左侧，而最后一列位于屏幕的右侧。

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

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创建一个粘性页脚。下面的代码使页面的整个正文成为flex容器，该容器至少是视口高度（ 100vh ）的100％。

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
.container {
    flex: 1;    /* same as flex-grow: 1; */
}

真正的诀窍在于增加了flex: 1; .container元素的规则（在HTML中的<footer>上方）。 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属性将使页脚根据视口的大小包装成多行。为了防止列过窄，我还为每个flex项目设置了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.设置通讯表单的样式

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

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

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将所有三个元素显示在屏幕的左侧，并且彼此相邻。

.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; */
}

查看演示

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

结论

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

flexbox页脚的最大优点是您可以对每个级别使用不同的包装，大小调整和对齐规则。因此，您可以使页脚完全了解内容，而不必使用JavaScript或（许多）媒体查询。

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-build-a-responsive-multi-level-sticky-footer-with-flexbox--cms-33341

vux flexbox使用

daique1908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vux flexbox使用_如何使用Flexbox构建快速响应的多层粘性页脚

在本教程中，我将向您展示如何使用flexbox创建响应式，多级，多列的页脚，无论该页脚如何。我们将要建立的这是我们正在构建的演示。查看全屏版本，以正确了解其响应能力！随时向<div class="container"></div>添加一些内容，以了解此页脚的粘性方面也是如何工作的。 Flexbox非常适合页脚 Flexbox使得构建灵活的布局成为可能...
复制链接

扫一扫