📌  相关文章
📜  如何在固定的 flexbox 导航栏下放置内容？

📅  最后修改于: 2021-08-31 02:20:58             🧑  作者: Mango

导航栏：使用 CSS，您可以将 HTML 菜单更改为令人惊叹的导航栏。导航栏只不过是链接列表。导航栏需要标准的 HTML 作为基础。通过使用

    和
  • 组件使理想化变得有意义。

    我们可以通过以下两种方法在固定导航栏中放置Content：

    • 方法一：在CSS中使用float

      句法： 

      float: none | left | right | initial | inherit;

      属性值：

      • none：不影响内容的位置(默认)。
      • left：内容将浮动到其容器的左侧。
      • right：内容将浮动到其容器的右侧。
      • 初始：将此属性设置为其默认值。
      • 继承：从其父组件获取此属性。

      固定导航栏：我们可以包含 CSS 并且可以使导航栏保持在页面底部的顶部，确实当用户滚动页面时：

      例子： 

      

    
        
    
    
        
        
            
      • 
                Home
            
        • 
            
      • News
        • 
            
      • Contact
        • 
            
      • About
        • 
        
      
        
      
            
      GeeksforGeeks
      
            
      Fixed Top Navigation Bar
      
            
      Scroll Scroll Scroll......
      
            
      Write Something Write Something
              Write Something Write Something..
      
            
      Write Something Write Something 
              Write Something Write Something..
      
            
      Write Something Write Something 
              Write Something Write Something..
      
            
      Write Something Write Something 
              Write Something Write Something..
      
            
      Write Something Write Something 
              Write Something Write Something..
      
            
      Write Something Write Something
              Write Something Write Something..
      
            
      Write Something Write Something 
              Write Something Write Something..
      
            
      Write Something Write Something 
              Write Something Write Something..
      
            
      Write Something Write Something 
              Write Something Write Something..
      
            
      Write Something Write Something
              Write Something Write Something..
      
            
      Write Something Write Something 
              Write Something Write Something..
      
            
      Write Something Write Something 
              Write Something Write Something..
      
            
      Write Something Write Something
              Write Something Write Something..
      
            
      Write Something Write Something 
              Write Something Write Something..
      
            
      Write Something Write Something 
              Write Something Write Something..
      
            
      Write Something Write Something 
              Write Something Write Something..
      
            
      Write Something Write Something 
              Write Something Write Something..
      
            
      Write Something Write Something 
              Write Something Write Something..
      
            
      Write Something Write Something 
              Write Something Write Something..
      
            
      Write Something Write Something 
              Write Something Write Something..
      
        
      
    

      输出：

      注：位置：绝对；内容忽略浮动属性。

      • 列表样式类型：无；用来发射子弹。导航栏不需要列表标记。
      • 设置边距：0；和填充：0;驱逐浏览器默认设置。

    • 方法 2：在 CSS 中使用 Flexbox

      Flexbox Flexbox 可能是一个了不起的布局设备。通过使用 flexbox，我们能够将内容设置为列等等。我们将很快了解 flexbox 的属性。 (您可以在代码中使用以下语法并使用它！)

      flex 容器的 flexbox 属性： (property:values;)

      • 显示：弹性；
      • 弹性方向：行 |行反转 |专栏 |列反转；
      • flex-wrap:包裹 |无包装|换行；
      • flex-flow：列包装；
      • justify-content: flex-start |柔性端|中心 |周围空间|间隔|空间均匀|开始 |结束 |左 |正确的;
      • 对齐项目：拉伸 |弹性启动 |柔性端|中心 |开始 |结束 |基线 |第一个基线 |最后基线 |自启动|自我终结；
      • 对齐内容： flex-start |柔性端|中心 |间隔|周围空间|空间均匀|舒展|开始 |结束 |基线 |第一个基线 |最后基线；

      flex 项目的 flexbox 属性： (property:values;)

      • 订单： 4； /* 默认值为 0 */
      • 弹性增长： 2； /* 默认 0 */
      • 弹性收缩： 5； /* 默认 1 */
      • 弹性基础：自动； /* 默认自动 */
      • 弹性：无； (默认情况下，它是 flex-grow、flex-shrink 和 flex-basis 组合的速记属性(例如 flex: 0 1 auto; ))
      • 对齐自我：自动 |中心 |基线 |弹性启动 |柔性端|拉紧;

      **请注意，浮动、清除和垂直对齐对弹性项目没有影响。也禁止使用负数。

      如何创建固定的 flexbox 导航栏? 

      /* Modify the header(above we modified 
    ul and li instead of header)*/  
header {
  display: flex; 
  /* using flexbox property for parent
     also known as inline-flex*/  
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  position: fixed;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
}

      在这个例子中，

      • 显示：弹性；为父级使用 flexbox 属性，也称为 inline-flex。
      • 对齐内容：间隔；线内东西均匀分散；第一项在开始行，最后一项在结论行。但是在这个插图中，我们设置了标题标签的样式，因此可能看不到这种影响。但是，如果我们将 ul 标签样式化，就会看到这种影响。
      • 订单：1；排列属性控制它们在 flex 支架中的显示顺序。默认顺序为0；

      例子： 

      

    
        
    
    
        
      
            
        
      
        
      
            
      
                
      
                GeeksforGeeks
            
      
            
      Fixed Flexbox Navigation Bar
      
            
      Scroll Scroll Scroll......
      
            
      Write Something Write Something Write 
              Something Write Something..
      
            
      Write Something Write Something Write 
              Something Write Something..
      
            
      Write Something Write Something Write 
              Something Write Something..
      
            
      Write Something Write Something Write
              Something Write Something..
      
            
      Write Something Write Something Write 
              Something Write Something..
      
            
      Write Something Write Something Write 
              Something Write Something..
      
            
      Write Something Write Something Write 
              Something Write Something..
      
            
      Write Something Write Something Write 
              Something Write Something..
      
            
      Write Something Write Something Write 
              Something Write Something..
      
            
      Write Something Write Something Write 
              Something Write Something..
      
            
      Write Something Write Something Write 
              Something Write Something..
      
            
      Write Something Write Something Write 
              Something Write Something..
      
            
      Write Something Write Something Write 
              Something Write Something..
      
            
      Write Something Write Something Write
              Something Write Something..
      
            
      Write Something Write Something Write 
              Something Write Something..
      
            
      Write Something Write Something Write 
              Something Write Something..
      
            
      Write Something Write Something Write
              Something Write Something..
      
            
      Write Something Write Something Write 
              Something Write Something..
      
            
      Write Something Write Something Write 
              Something Write Something..
      
            
      Write Something Write Something Write
              Something Write Something..
      
        
      
    

      输出：

    • 如何在固定的 flexbox 导航栏下放置内容?

      例子： 

      

    
        
    
    
        
      
            
        
      
        
      
            
      
                
      
                GeeksforGeeks
            
      
            
      Content in Fixed Flexbox
              Navigation Bar
      
            
            
      Scroll Scroll Scroll......
      
            
      Write Something Write Something Write
              Something Write Something..
      
            
      Write Something Write Something Write
              Something Write Something..
      
            
      Write Something Write Something Write
              Something Write Something..
      
            
      Write Something Write Something Write
              Something Write Something..
      
            
      Write Something Write Something Write
              Something Write Something..
      
            
      Write Something Write Something Write
              Something Write Something..
      
            
      Write Something Write Something Write
              Something Write Something..
      
            
      Write Something Write Something Write
              Something Write Something..
      
            
      Write Something Write Something Write
              Something Write Something..
      
            
      Write Something Write Something Write
              Something Write Something..
      
            
      Write Something Write Something Write
              Something Write Something..
      
            
      Write Something Write Something Write
              Something Write Something..
      
            
      Write Something Write Something Write
              Something Write Something..
      
            
      Write Something Write Something Write
              Something Write Something..
      
            
      Write Something Write Something Write
              Something Write Something..
      
            
      Write Something Write Something Write
              Something Write Something..
      
            
      Write Something Write Something Write
              Something Write Something..
      
            
      Write Something Write Something Write 
              Something Write Something..
      
            
      Write Something Write Something Write
              Something Write Something..
      
            
      Write Something Write Something Write
              Something Write Something..
      
        
      
    

      输出：