文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

使用CSS Flexbox 构建可靠实用的网站 Header

2024-12-03 14:14

关注

本文已经过原作者 Shadeed 授权翻译。

在 CSS3 没有普及的时候，创建一个网站 header 是一项既可怕又困难的任务 ?。那时，Flexbox 还是个新东西，我们不得不使用老方法，比如 float和clearfix技术。今天，情况完全不同了，Flexbox 得到了广泛的支持，大大的减少了我们的开发工作，同时也为我们提供了更多的可能性。

有人可能会说，现在 CSS3 这么普及，制作一个网站 header 不是很容易么 ??并非如此，因为有一些有趣的挑战需要解决,在本文中我们会介绍其中的几种。

简介首先，这里所说的网站 Header 是用户访问网站时首先看到的内容之一。通常，它包含logo或网站名称以及导航链接，如下所示:

 

不管 Header 的视觉设计如何，关键元素都是logo 和导航。

Flexbox

当 flexbox 应用于 Header 元素时，它将使所有子项目在同一行中。然后，你所需要做的就是应用justify-content来分配它们之间的间距。

html

 

  1. "site-header"> 
  2.   "#" class="brand">Brand 
  3.   "nav"> 
  4.  

 

css

  1. .site-header { 
  2.   display: flex; 
  3.   justify-content: space-between; 
  4.   align-items: center; 
  5. } 

很简单，对吧?对于这样的用例，是的，可能会比这更复杂。

Header Wrapper

在上面的 lago 和 nav 外没有包含一层 wrapper，这在大屏幕可能会出现问题。

 

从上可以看到第一个Header太宽了，因为它没有内部 wrapper 相比第一个，第二个看起来好多了。所以，我们可以对 HTML 进行如下调整。

 

  1. "site-header"> 
  2.   "wrapper site-header__wrapper"> 
  3.     "#" class="brand">"logo.svg" alt="brand" /> 
  4.     "nav"> 
  5.   
 
  •  
    •

     

    flexbox应该移动到.site-header__wrapper元素中。

    1. .site-header__wrapper { 
    2.   display: flex; 
    3.   justify-content: space-between; 
    4.   align-items: center; 
    5. } 

    使用 flex-wrap当屏幕很小的时候，可以水平滚动。见下图

     

    如果没有设置flex-wrap: wrap，当屏幕过小的时候就会出现水平滚动，如果不想这样，可以加上 flex-wrap: wrap` ?。

    Header 的多种形式

    我喜欢使用flexbox的原因是它可以很容易地处理 header 设计的多种变化。基于前面的 header 设计，我扩展了 header 元素的一些选项，如添加按钮、搜索输入和更改子项目的顺序。

    Header 变化 1

     

    假设我想要在导航链接旁边添加了一个按钮。这应该如何处理?我们应该把它作为链接添加到导航栏中吗?还是应该和导航分开?我更喜欢这样做。

     


     

    这种情况下，我们不能在用 justify-content: space-between来处理间隙，相反，我会在 nav 元素上使用 margin-left: auto，

    这样，它就会自动向右靠齐。

     

    将导航和 track 按钮分开对于移动设备非常有用，因为我们需要保留该按钮并在其旁边显示一个移动切换按钮。

     

    Header 变化 2

     

    与第一个变化类似，这个变化增加了一个搜索输入，占用了剩余的可用空间。对于flexbox，这可以通过使用flex属性来实现。

    html

    1. "site-header"> 
    2.   "wrapper site-header__wrapper"> 
    3.     "#" class="brand">"logo.svg" alt="brand" /> 
    4.     "search">
     
  •     "nav"> 
  •     "/track-shipment" class="button">Track 
  •    
  •  
    •

     

    css

    1. .search { 
    2.   flex: 1; 
    3. } 

    现在，搜索输入将填充 brand 和nav 之间的可用空间。但是，这有一些限制。在较小的视口上，header 将如下所示:

     

    搜索输入宽度不应小于此宽度，因为这样很难输入和查看全文。下面有两种解决方案：

     

    我更喜欢第二种解决方案，因为它不会过早隐藏导航。一般来说，如果元素不影响布局，我会尽量避免隐藏它。

    Header 变化 3

     

    对于这个示例，HTML标记是相同的，但是 header 里的元素顺序是不同的。我们如何才能做到这一点? 你可能想到用 order 属性来解决这个问题 ?

    html

    1. "site-header"> 
    2.   "wrapper site-header__wrapper"> 
    3.     "#" class="brand">"logo.svg" alt="brand" /> 
    4.     "nav"> 
    5.     "/track-shipment" class="button">Track 
    6.    
    7.  

     

    css

    1. .site-header { 
    2.   display: flex; 
    3.   justify-content: space-between; 
    4. } 
    5.  
    6. .nav { 
    7.   order: -1; 
    8. } 

     

    这样有个问题，间隔空间不会使 logo 居中，它只是分散项目之间的空间。

    解决方案是给每个子项一个flex: 1，这将在它们之间分配可用空间。

    1. .brand, 
    2. .nav, 
    3. .button { 
    4.   flex: 1; 
    5. } 

     

    这样，由于flex: 1，按钮元素变宽了， 解决此问题的唯一方法是将其包裹到另一个元素中。

    HTML

    1. "site-header"> 
    2.   "wrapper site-header__wrapper"> 
    3.     "#" class="brand">"logo.svg" alt="brand" /> 
    4.     "nav"> 
    5.     "button-wrapper"> 
    6.       "/track-shipment" class="button">Track 
    7.      
    8.    
    9.  

     

    这样，我们就可以将下面的logo和按钮居中。

    .logo { text-align: center;}.button-wrapper { text-align: end; }

     

    但是，如果添加了更多导航链接，这种方法很容易失败。我们需要确保导航链接的数量不会超过特定的限制。下面一个logo偏离中心的例子 ?:

     

     


     

     

    正如在上图中看到的，logo没有居中。所以要记住这一点，以避免这种意想不到的问题 ?。

    使用 Flexbox 构建 Header 的有用技巧flex-basis

    如果某个元素需要在移动设备上占据整个宽度(不能隐藏的重要导航)，我会使用flex-basis: 100% ?。


     

     

    从上面的模型看，做起来可能很简单。实际上不是。通常，header 可能有一个内部间距(padding)，当我们强制某项占据全部宽度时，除非清除padding ，否则它不会生效。但是，删除padding不切实际，因为它将影响设计中的其他元素 ?。

    下面解决此问题的一种解决方法 ?：

    1. 将flex: 1 0 100%添加到导航元素。
    2. 如有需要，请更改其order。有时，可能还有其他元素，我们想确保导航是最后一个。
    3. 加上一个等于宽度等于 padding 的负 margin，这也会让导航占据整个宽度。
    4. 在导航中添加 padding，这会增加一些适当的空间。
    5. 最后，使用了justify-content: center将导航项居中(不重要)
    1. .nav { 
    2.   flex: 1 0 100%;  
    3.   order: 2;  
    4.   margin: 1rem -1rem -1rem -1rem;  
    5.   padding: 1rem;  
    6.   display: flex;  
    7.   justify-content: center;  
    8. } 

     

    间距

    着 Chrome 和 Firefox 支持flex gap属性，现在在flex项目之间添加间距比以往任何时候都容易。考虑以下


     

     

    要做到上图的高亮间距，只需将gap: 1rem添加到flex父节点。没有了gap，我们还是需要用旧的方式来间隔 ?。

    1.  
    2. .brand { 
    3.   margin-right: 1rem; 
    4. } 
    5.  
    6. .sign-in { 
    7.   margin-right: 1rem; 
    8. } 
    9.  
    10.  
    11. .site-header { 
    12.    
    13.   gap: 1rem; 
    14. } 

    作者：Shadeed 译者：前端小智 来源：ishadeed原文：https://ishadeed.com/article/website-headers-flexbox/

     本文转载自微信公众号「大迁世界」，可以通过以下二维码关注。转载本文请联系大迁世界公众号。

     

    来源：大迁世界内容投诉

    免责声明：

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

      难度     813人已做
      查看

    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看

    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看

    • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

      难度     435人已做
      查看

    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机

    使用CSS Flexbox 构建可靠实用的网站 Header

    后端开发CSS网站2024-12-03

    使用Golang构建可靠的微服务架构

    使用Golang构建可靠的微服务架构
    后端开发2024-03-05

    使用 Jekyll 构建你的网站

    后端开发Jekyll网站生成器2024-12-02

    使用Java与Apache Kafka构建可靠的消息系统

    后端开发数据性能2024-11-30

    使用Laravel和原生PHP构建可靠的桌面应用程序

    使用Laravel和原生PHP构建可靠的桌面应用程序
    后端开发2023-12-20

    使用 Next.js 12 和 Cosmic 构建一个可以上线的餐厅网站

    后端开发Next.js餐厅网站2024-12-02

    如何使用Django构建一个高效的网站？

    后端开发2023-05-29

    如何使用 Git 和 PHP 容器函数来构建可靠的应用程序？

    后端开发2023-08-27

    导航的艺术：使用 CMS 网站地图构建直观的网站

    <strong>导航的艺术：使用 CMS 网站地图构建直观的网站</strong>
    后端开发2024-03-08

    PHP Web服务最佳实践：构建稳定可靠的在线应用！

    PHP Web服务最佳实践：构建稳定可靠的在线应用！
    后端开发2024-02-05

    存储实战笔记：如何使用 Go 和 Spring 构建高效、可靠的存储系统？

    后端开发2023-07-04

    点亮你的代码：使用 PHP 构建多语言网站

    点亮你的代码：使用 PHP 构建多语言网站
    后端开发2024-04-02

    使用ChatGPT快速构建优质网站模板的方法

    后端开发2023-10-11

    实时教程：如何使用ASP和JavaScript构建交互式网站

    后端开发2023-09-27

    Spring Boot Security实战项目：一步步构建安全可靠的应用系统

    Spring Boot Security实战项目：一步步构建安全可靠的应用系统
    后端开发2024-02-12

    使用PHP MVC架构构建高可扩展性应用的实战案例

    使用PHP MVC架构构建高可扩展性应用的实战案例
    后端开发2024-02-05

    HTML 与 CSS 协同工作：构建美观且实用的网页

    HTML 与 CSS 协同工作：构建美观且实用的网页
    后端开发2024-04-02

    Java Apache Camel 实践指南：构建高可靠性的消息驱动的应用程序

    Java Apache Camel 实践指南：构建高可靠性的消息驱动的应用程序
    后端开发2024-02-10

    使用 CSS prefers-* 规范，提升网站的可访问性与健壮性

    后端开发CSS2024-12-03

    使用无头 CMS 构建灵活且模块化的网站

    <strong>使用无头 CMS 构建灵活且模块化的网站</strong>
    后端开发2024-03-08
    位置：首页-资讯-后端开发
    咦！没有更多了？去看看其它编程学习网 内容吧
    首页课程
    资料下载    问答资讯