¿Cómo colocar contenido debajo de la barra de navegación fija de Flexbox?

Con CSS, puede cambiar los menús HTML en asombrosas barras de navegación. La barra de navegación no es más que la lista de enlaces. Una barra de navegación necesita HTML estándar como base. Al usar los componentes <ul> y <li> tiene sentido idealizar.

Podemos colocar contenido en la barra de navegación fija mediante dos métodos, como se indica a continuación:

Sintaxis:

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

Valores de propiedad:

ninguno: no influirá en la posición del contenido (esto es predeterminado).
izquierda: el contenido flotará a la izquierda de su contenedor.
right: el contenido flotará a la derecha de su contenedor.
initial: establece esta propiedad en su valor predeterminado.
heredar: adquiere esta propiedad de su componente padre.

Podemos incluir CSS y podemos hacer que la barra de navegación permanezca en la parte superior del pie de la página, de hecho, cuando el usuario se desplaza por la página:

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                margin: 0;
            }
            ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: rgba(0, 0, 0, 0.7);
                position: fixed;
                /* position property is used 
                   to fix navbar */
                top: 0;
                width: 100%;
            }
            li {
                float: left;
                /* when flexbox will be used 
                   then there will be no need
                   to write float properties 
                   of CSS*/
            }
            li a {
                display: block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }
            li a:hover:not(.active) {
                background-color: #111;
            }
            .active {
                background-color: #4caf50;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>
                <a class="active" href="#home">Home</a>
            </li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#about">About</a></li>
        </ul>
        <div style="padding: 20px;
                    margin-top: 30px;
                    background-color: 
                        rgba(135, 206, 235, 0.5);
                    height: 1500px;">
            <h1 style="color: green;">GeeksforGeeks</h1>
            <h1>Fixed Top Navigation Bar</h1>
            <h2>Scroll Scroll Scroll......</h2>
            <p>Write Something Write Something
              Write Something Write Something..</p>
            <p>Write Something Write Something 
              Write Something Write Something..</p>
            <p>Write Something Write Something 
              Write Something Write Something..</p>
            <p>Write Something Write Something 
              Write Something Write Something..</p>
            <p>Write Something Write Something 
              Write Something Write Something..</p>
            <p>Write Something Write Something
              Write Something Write Something..</p>
            <p>Write Something Write Something 
              Write Something Write Something..</p>
            <p>Write Something Write Something 
              Write Something Write Something..</p>
            <p>Write Something Write Something 
              Write Something Write Something..</p>
            <p>Write Something Write Something
              Write Something Write Something..</p>
            <p>Write Something Write Something 
              Write Something Write Something..</p>
            <p>Write Something Write Something 
              Write Something Write Something..</p>
            <p>Write Something Write Something
              Write Something Write Something..</p>
            <p>Write Something Write Something 
              Write Something Write Something..</p>
            <p>Write Something Write Something 
              Write Something Write Something..</p>
            <p>Write Something Write Something 
              Write Something Write Something..</p>
            <p>Write Something Write Something 
              Write Something Write Something..</p>
            <p>Write Something Write Something 
              Write Something Write Something..</p>
            <p>Write Something Write Something 
              Write Something Write Something..</p>
            <p>Write Something Write Something 
              Write Something Write Something..</p>
        </div>
    </body>
</html>

Producción:

Nota: posición:absoluta; al contenido ignora la propiedad flotante.

Tipo de estilo de lista: ninguno; se utiliza para expulsar las balas. Una barra de navegación no requiere marcadores de lista.
Establecer margen: 0; y relleno: 0; para eliminar la configuración predeterminada del navegador.

Flexbox podría ser un dispositivo de diseño increíble. Al utilizar flexbox, podemos configurar el contenido en columnas y mucho más. En breve repasaremos las propiedades del flexbox. (¡Puedes usar la siguiente sintaxis en el código y jugar con ella!)

Propiedades de flexbox para contenedor flexible: (propiedad:valores;)

pantalla: flexible;
dirección de flexión: fila | fila-reversa | columna | columna inversa;
envoltura flexible: envoltura | ahora rap | envolver-reversa;
flujo flexible: envoltura de columna;
justificar-contenido: inicio flexible | extremo flexible | centro | espacio alrededor | espacio-entre | espacio uniformemente | empezar | fin | izquierda | Correcto;
alinear elementos: estirar | arranque flexible | extremo flexible | centro | empezar | fin | línea de base | primera línea de base | última línea de base | auto-inicio | fin propio;
alinear-contenido: inicio flexible | extremo flexible | centro | espacio-entre | espacio alrededor | espacio uniformemente | estirar | empezar | fin | línea de base | primera línea de base | última línea de base;

Propiedades de flexbox para elementos flexibles: (propiedad: valores;)

orden: 4; /* el valor predeterminado es 0 */
crecimiento flexible: 2; /* por defecto 0 */
contracción flexible: 5; /* predeterminado 1 */
base flexible: automático; /* automático por defecto */
flexión: ninguno; (Es una propiedad abreviada para flex-grow, flex-shrink y flex-basis combinados ( Ej. flex: 0 1 auto; ) por defecto)
alinearse: auto | centro | línea de base | arranque flexible | extremo flexible | tramo;

** Tenga en cuenta que float, clear y vertical-align no tienen efecto en un elemento flexible. También está prohibido el uso de números negativos.

/* 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%;
}

En este ejemplo ,

pantalla: flexible; utilizando la propiedad flexbox para padres, también conocida como inline-flex.
justificar-contenido: espacio-entre; las cosas están uniformemente dispersas dentro de la línea; firstitem está en la línea de inicio, cosa final en la línea de conclusión. Pero en esta ilustración hemos diseñado la etiqueta del encabezado, por lo que es posible que este impacto no se vea. Pero si diseñamos una etiqueta ul, se verá este efecto.
orden: 1; La propiedad de organización controla el orden en que aparecen dentro del soporte flexible. Por defecto el orden es 0;

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                margin: 0;
            }
  
            header {
                display: flex;
                /* Using flexbox property for parent
                   also known as inline-flex */
                justify-content: space-between;
                /* Items are evenly distributed in 
                   the line; firstitem is on the 
                   start line, last item on the 
                   end line*/
                align-items: center;
                padding: 5px;
                position: fixed;
                overflow: hidden;
                background-color: rgba(0, 0, 0, 0.7);
                width: 100%;
            }
  
            nav {
                order: 1;
            }
            .nav_links {
                list-style: none;
            }
  
            .nav_links li {
                display: inline-block;
                padding: 0px 20px;
            }
  
            .nav_links li a:hover {
                color: rgb(255, 255, 255);
            }
  
            li a {
                display: block;
                color: white;
                text-align: center;
                padding: 5px 5px;
                text-decoration: none;
            }
            li a:hover:not(.active) {
                background-color: #111;
            }
            .active {
                background-color: #4caf50;
            }
        </style>
    </head>
    <body>
        <header>
            <nav>
                <ul class="nav_links">
                    <li><a class="active" 
                           href="#home">Home</a></li>
                    <li><a href="#news">News</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="#about">About</a></li>
                </ul>
            </nav>
        </header>
        <div style="padding: 20px; 
             background-color: rgba(135, 206, 235, 0.5);
             height: 1500px;">
            <h1 style="color: green;">
                <br />
                GeeksforGeeks
            </h1>
            <h1>Fixed Flexbox Navigation Bar</h1>
            <h2>Scroll Scroll Scroll......</h2>
            <p>Write Something Write Something Write 
              Something Write Something..</p>
            <p>Write Something Write Something Write 
              Something Write Something..</p>
            <p>Write Something Write Something Write 
              Something Write Something..</p>
            <p>Write Something Write Something Write
              Something Write Something..</p>
            <p>Write Something Write Something Write 
              Something Write Something..</p>
            <p>Write Something Write Something Write 
              Something Write Something..</p>
            <p>Write Something Write Something Write 
              Something Write Something..</p>
            <p>Write Something Write Something Write 
              Something Write Something..</p>
            <p>Write Something Write Something Write 
              Something Write Something..</p>
            <p>Write Something Write Something Write 
              Something Write Something..</p>
            <p>Write Something Write Something Write 
              Something Write Something..</p>
            <p>Write Something Write Something Write 
              Something Write Something..</p>
            <p>Write Something Write Something Write 
              Something Write Something..</p>
            <p>Write Something Write Something Write
              Something Write Something..</p>
            <p>Write Something Write Something Write 
              Something Write Something..</p>
            <p>Write Something Write Something Write 
              Something Write Something..</p>
            <p>Write Something Write Something Write
              Something Write Something..</p>
            <p>Write Something Write Something Write 
              Something Write Something..</p>
            <p>Write Something Write Something Write 
              Something Write Something..</p>
            <p>Write Something Write Something Write
              Something Write Something..</p>
        </div>
    </body>
</html>

Producción:

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                margin: 0;
            }
  
            header {
                justify-content: space-between;
                /* Items are evenly distributed 
                   in the line; firstitem is on
                   the start line, last item on
                   the end line */
                padding: 5px;
                position: fixed;
                overflow: hidden;
                background-color: rgba(0, 0, 0, 0.7);
                width: 100%;
            }
  
            .bar {
                display: flex;
               /* Use flexbox property for parent 
                  also known as inline-flex */
                align-items: center;
            }
            .search {
               /* Take up the rest of the 
                  remaining space */
                flex: 1;
            }
            .search input {
                width: 90%;
            }
  
            nav {
                order: 1;
            }
        </style>
    </head>
    <body>
        <header>
            <nav>
                <div class="bar">
                    <div class="username" 
                       style="color: rgb(255, 255, 255); 
                              font-size: 30px;">
                    Search here :    
                    </div>
                    <div class="search">
                        <input type="search" 
                               placeholder="search..." />
                    </div>
                </div>
            </nav>
        </header>
        <div style="padding: 20px;
                    background-color: rgba(
                    135, 206, 235, 0.5); 
                    height: 1500px;">
            <h1 style="color: green;">
                <br />
                GeeksforGeeks
            </h1>
            <h1>Content in Fixed Flexbox
              Navigation Bar</h1>
            
            <h2>Scroll Scroll Scroll......</h2>
            <p>Write Something Write Something Write
              Something Write Something..</p>
            <p>Write Something Write Something Write
              Something Write Something..</p>
            <p>Write Something Write Something Write
              Something Write Something..</p>
            <p>Write Something Write Something Write
              Something Write Something..</p>
            <p>Write Something Write Something Write
              Something Write Something..</p>
            <p>Write Something Write Something Write
              Something Write Something..</p>
            <p>Write Something Write Something Write
              Something Write Something..</p>
            <p>Write Something Write Something Write
              Something Write Something..</p>
            <p>Write Something Write Something Write
              Something Write Something..</p>
            <p>Write Something Write Something Write
              Something Write Something..</p>
            <p>Write Something Write Something Write
              Something Write Something..</p>
            <p>Write Something Write Something Write
              Something Write Something..</p>
            <p>Write Something Write Something Write
              Something Write Something..</p>
            <p>Write Something Write Something Write
              Something Write Something..</p>
            <p>Write Something Write Something Write
              Something Write Something..</p>
            <p>Write Something Write Something Write
              Something Write Something..</p>
            <p>Write Something Write Something Write
              Something Write Something..</p>
            <p>Write Something Write Something Write 
              Something Write Something..</p>
            <p>Write Something Write Something Write
              Something Write Something..</p>
            <p>Write Something Write Something Write
              Something Write Something..</p>
        </div>
    </body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por swapnitanerkar28 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta