CSS 技巧 -- 制作响应式 Headers

制作漂亮,响应式的标头一直是一个棘手的过程, 直到现在为止你可能还需要使用 float 或者其它复杂的技巧,甚至有时还需要手动的调整像素值。但现在不在需要这么做了!

我们将要展示的技术依赖于强大的 flebox 模型模式，它将为你做所有扰人的工作。它只使用一些CSS属性来创建一个标题，它适当对齐，并在所有屏幕尺寸看起来不错，同时保持代码更清洁，更少的hacky。

下面是效果图

demo01.png

---

The Technique

在我们的演示示例中，我们构建了一个标题，它分为三个部分，其中包含嵌套在其中的典型标题内容：

• 左部 - 企业 logo
• 中部 - 少量的超链接
• 右部 - 一个按钮

下面你将看到核心部分代码。

在 HTML 代码中，我们将内容放到 div 标签中，这样将有利于 CSS 的应用，而且通常能产生更有条理的代码。

    

        
CoolLogo
        

            

                
Our products
                
Pricing
                
Blog
            
        
        
Buy now
    

下面我们只需要短短几行 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 属性，可以查看这些连接：

• A quick guide to flexbox
• justify-content
• align-items
• flex-direction