制作漂亮,响应式的标头一直是一个棘手的过程, 直到现在为止你可能还需要使用 float 或者其它复杂的技巧,甚至有时还需要手动的调整像素值。但现在不在需要这么做了!
我们将要展示的技术依赖于强大的 flebox 模型模式，它将为你做所有扰人的工作。它只使用一些CSS属性来创建一个标题，它适当对齐，并在所有屏幕尺寸看起来不错，同时保持代码更清洁，更少的hacky。
下面是效果图
demo01.png
The Technique
在我们的演示示例中，我们构建了一个标题，它分为三个部分，其中包含嵌套在其中的典型标题内容：
- 左部 - 企业 logo
- 中部 - 少量的超链接
- 右部 - 一个按钮
下面你将看到核心部分代码。
在 HTML 代码中，我们将内容放到 div 标签中，这样将有利于 CSS 的应用，而且通常能产生更有条理的代码。
<header>
<div class="header-left">CoolLogo</div>
<div class="header-center">
<ul>
<li><a href="#">Our products</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<div class="header-right"><button>Buy now</button></div>
</header>
下面我们只需要短短几行 CSS 代码就可以完成整个工作。
header{
/* Enable flex mode. */
display: flex;
/* Spread out the elements inside the header. */
justify-content: space-between;
/* Align items vertically in the center. */
align-items: center;
}
完全响应式
即使屏幕的尺寸发生变化，space-between 也仍然会按照原有的方式保持对齐。 但是，当设备的窗口对于一个 header 而言比较小的时候，我们可以通过媒体查询改变 flex-direction 属性使其垂直对齐。
@media (max-width: 1000px){
header{
/* Reverse the axis of the header, making it vertical. */
flex-direction: column;
/* Align items to the begining (the left) of the header. */
align-items: flex-start;
}
}
总结
为了解更多关于 flexbox 和教程中使用到的 CSS 属性，可以查看这些连接：
网友评论