vux flexbox使用_如何使用Flexbox构建快速响应的多层粘性页脚
vux flexbox使用
在本教程中，我将向您展示如何使用flexbox创建响应式，多级，多列的页脚，无论该页脚如何。
我们将要建立的
这是我们正在构建的演示。 查看全屏版本，以正确了解其响应能力！
随时向添加一些内容，以了解此页脚的粘性方面也是如何工作的。
Flexbox非常适合页脚
Flexbox使构建灵活的布局成为可能，这些布局自然可以适应不同的视口大小。 多层次，多列的页脚是利用flexbox独特功能的一个很好的例子，特别是：
-
flex-grow属性使我们无论如何都可以将页脚固定在页面底部， -
flex-wrap属性可让列根据用户设备的视口大小自动换行， -
justify-content属性使得可以按不同的排列方式显示列（space-around，space-between，center等）。
探索完flexbox对页脚布局的作用之后，您将可以自由发挥创造力，并看到可能的方法。 页脚是帮助用户继续前进的理想之地； 如果他们已经到达页面底部，但仍然找不到他们想要的东西，请考虑添加：
- 详细导航
- 呼吁采取行动
- 电子报注册
- 社会联系
- 令人放心的证明，例如奖项，表彰，（真正的）隐私徽章等。
- 支持或在线帮助链接
- 品牌推广
- 联系方式
- 可能提醒您网站的个性，以提高微笑或鼓励用户值得一游
页脚结构
尽管也可以使用CSS网格创建页脚，但是flexbox允许我们在彼此之上构建多个页脚级别，每个级别独立包装。 我们将在本教程中创建的页脚分为三个级别，每个级别都是一个单独的flex容器：
- 主要页脚：四列，最后一列为简报注册表单，
- 社交页脚：页面上居中放置六个社交图标（此级别不会自动换行），
- 合法页脚：三列，前两列位于屏幕的左侧，而最后一列位于屏幕的右侧。
此外，页脚还将停留在页面底部，即使上面没有足够的内容也是如此。 通过使整个标签成为基于列的flex容器，我们将实现这种粘性效果。
1.设置HTML
让我们从HTML开始。 我已将所有内容放入语义标记中，并将三个页脚级别放入了三个元素中。 对于社交页脚，我使用了Font Awesome图标字体。
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中的上方）。 flex属性是flex-grow ， flex-shrink和flex-basis属性的简写。 当只有一个值时，它表示flex-grow ，其中flex-shrink和flex-basis设置为其默认值。
flex-grow属性定义了在正容器过多时（即flex项不能覆盖整个容器）在flex容器内发生的情况。 其默认值为0 ，这意味着所有剩余空间将在项目之间平均分配。 因此，当我们将flex-grow设置为1 ， .container将获得屏幕上所有剩余的空间。 同时， 将没有多余的空间，因此它将自动向下推到页面底部。
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布局添加到元素中，以便在所有视口上将输入字段和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技巧。 在那里，我们使用了flex: 1; .container元素上的规则，因此flexbox将整个正空间分配给它，并将页脚推到页面的最底部。 在这里，我们可以做同样的事情。
尽管.ft-legal-list是基于行的flex容器，而.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; */
}查看演示
就这样; 我们的多级，多列，响应式，粘性页脚已完成！ 再次查看该演示以提醒自己在不同视口大小下的外观：
结论
Flexbox允许我们使用比以前更少的代码来创建复杂的灵活布局。 使用本教程中介绍的技术和技巧，您可以创建所需的页脚布局，并具有任意数量的级别和列。
flexbox页脚的最大优点是您可以对每个级别使用不同的包装，大小调整和对齐规则。 因此，您可以使页脚完全了解内容，而不必使用JavaScript或（许多）媒体查询。
翻译自: https://webdesign.tutsplus.com/tutorials/how-to-build-a-responsive-multi-level-sticky-footer-with-flexbox--cms-33341
vux flexbox使用
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！