CSS | Propiedad de flujo flexible

Posted on by Rudeus Greyrat

La propiedad de flujo flexible es una subpropiedad del módulo de diseño de caja flexible y también una propiedad abreviada para envoltura flexible y dirección flexible.
Nota: La propiedad flex es inútil cuando el elemento no es un elemento flexible.

Sintaxis:

flex-flow: flex-direction flex-wrap;

Valores de la propiedad de flujo flexible:

  • row nowrap: organiza la fila de la misma manera que la dirección del texto y el valor predeterminado de wrap-flex es nowrap. Se utiliza para especificar que el artículo no tiene envoltura. Hace que el elemento se ajuste en líneas individuales.

    Sintaxis:

    flex-flow: row nowrap;

    Ejemplo:

    <!DOCTYPE html>
      
    <head>
        <title>flex-flow property</title>
        <style>
            #main {
                width: 400px;
                height: 300px;
                border: 2px solid black;
                display: flex;
                flex-flow: row nowrap;
            }
              
            #main div {
                width: 100px;
                height: 50px;
            }
              
            h1 {
                color: #009900;
                font-size: 42px;
                margin-left: 50px;
            }
              
            h3 {
                margin-top: -20px;
                margin-left: 50px;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <h3>The flex-flow:row nowrap</h3>
        <div id="main">
            <div style="background-color:#009900;">1</div>
            <div style="background-color:#00cc99;">2</div>
            <div style="background-color:#0066ff;">3</div>
            <div style="background-color:#66ffff;">4</div>
            <div style="background-color:#660066;">5</div>
            <div style="background-color:#663300;">6</div>
        </div>
    </body>
      
    </html>

    Producción:

  • nowrap inverso de fila: organiza la fila opuesta a la dirección del texto y el valor predeterminado de wrap-flex es nowrap. Se utiliza para especificar que el artículo no tiene envoltura. Hace que el elemento se ajuste en líneas individuales.
    Sintaxis: 
    flex-flow: row-reverse nowrap;

    Ejemplo:

    <!DOCTYPE html>
      
    <head>
        <title>flex-flow property</title>
        <style>
            #main {
                width: 400px;
                height: 300px;
                border: 2px solid black;
                display: flex;
                flex-flow: row-reverse nowrap;
            }
              
            #main div {
                width: 100px;
                height: 50px;
            }
              
            h1 {
                color: #009900;
                font-size: 42px;
                margin-left: 50px;
            }
              
            h3 {
                margin-top: -20px;
                margin-left: 50px;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <h3>The flex-flow:row-reverse nowrap</h3>
        <div id="main">
            <div style="background-color:#009900;">1</div>
            <div style="background-color:#00cc99;">2</div>
            <div style="background-color:#0066ff;">3</div>
            <div style="background-color:#66ffff;">4</div>
            <div style="background-color:#660066;">5</div>
            <div style="background-color:#663300;">6</div>
        </div>
    </body>
      
    </html>

    Producción:

  • column nowrap: igual que fila pero de arriba a abajo y el valor predeterminado de wrap-flex es nowrap. Se utiliza para especificar que el artículo no tiene envoltura. Hace que el elemento se ajuste en líneas individuales.
    Sintaxis: 
    flex-flow: column nowrap;

    Ejemplo:

    <!DOCTYPE html>
      
    <head>
        <title>flex-flow property</title>
        <style>
            #main {
                width: 400px;
                height: 300px;
                border: 2px solid black;
                display: flex;
                flex-flow: column nowrap;
            }
              
            #main div {
                width: 100px;
                height: 50px;
            }
              
            h1 {
                color: #009900;
                font-size: 42px;
                margin-left: 50px;
            }
              
            h3 {
                margin-top: -20px;
                margin-left: 50px;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <h3>The flex-flow:column nowrap</h3>
        <div id="main">
            <div style="background-color:#009900;">1</div>
            <div style="background-color:#00cc99;">2</div>
            <div style="background-color:#0066ff;">3</div>
            <div style="background-color:#66ffff;">4</div>
            <div style="background-color:#660066;">5</div>
            <div style="background-color:#663300;">6</div>
        </div>
    </body>
      
    </html>

    Producción:

  • column-reverse nowrap: Igual que fila-reversa de arriba a abajo y el valor predeterminado de wrap-flex es nowrap. Se utiliza para especificar que el artículo no tiene envoltura. Hace que el elemento se ajuste en líneas individuales.
    Sintaxis: 
    flex-flow: column-reverse nowrap;

    Ejemplo:

    <!DOCTYPE html>
      
    <head>
        <title>flex-flow property</title>
        <style>
            #main {
                width: 400px;
                height: 300px;
                border: 2px solid black;
                display: flex;
                flex-flow: column-reverse nowrap;
            }
              
            #main div {
                width: 100px;
                height: 50px;
            }
              
            h1 {
                color: #009900;
                font-size: 42px;
                margin-left: 50px;
            }
              
            h3 {
                margin-top: -20px;
                margin-left: 50px;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <h3>The flex-flow:column-reverse nowrap</h3>
        <div id="main">
            <div style="background-color:#009900;">1</div>
            <div style="background-color:#00cc99;">2</div>
            <div style="background-color:#0066ff;">3</div>
            <div style="background-color:#66ffff;">4</div>
            <div style="background-color:#660066;">5</div>
            <div style="background-color:#663300;">6</div>
        </div>
    </body>
      
    </html>

    Producción:

  • ajuste de fila: organiza la fila de la misma manera que la dirección del texto y la propiedad de ajuste se usa para dividir el elemento flexible en varias líneas. Hace que los elementos flexibles se ajusten a varias líneas según la
    sintaxis del ancho del elemento flexible: 
    flex-flow: row wrap;

    Ejemplo:

    <!DOCTYPE html>
      
    <head>
        <title>flex-flow property</title>
        <style>
            #main {
                width: 400px;
                height: 300px;
                border: 2px solid black;
                display: flex;
                flex-flow: row wrap;
            }
              
            #main div {
                width: 100px;
                height: 50px;
            }
              
            h1 {
                color: #009900;
                font-size: 42px;
                margin-left: 50px;
            }
              
            h3 {
                margin-top: -20px;
                margin-left: 50px;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <h3>The flex-flow:row wrap</h3>
        <div id="main">
            <div style="background-color:#009900;">1</div>
            <div style="background-color:#00cc99;">2</div>
            <div style="background-color:#0066ff;">3</div>
            <div style="background-color:#66ffff;">4</div>
            <div style="background-color:#660066;">5</div>
            <div style="background-color:#663300;">6</div>
        </div>
    </body>
      
    </html>

    Producción:

  • ajuste de fila inversa: organiza la fila opuesta a la dirección del texto y la propiedad de ajuste se usa para invertir el flujo de los elementos flexibles cuando se ajustan a nuevas líneas.
    Sintaxis: 
    flex-flow: row-reverse wrap;

    Ejemplo:

    <!DOCTYPE html>
      
    <head>
        <title>flex-flow property</title>
        <style>
            #main {
                width: 400px;
                height: 300px;
                border: 2px solid black;
                display: flex;
                flex-flow: row-reverse wrap;
            }
              
            #main div {
                width: 100px;
                height: 50px;
            }
              
            h1 {
                color: #009900;
                font-size: 42px;
                margin-left: 50px;
            }
              
            h3 {
                margin-top: -20px;
                margin-left: 50px;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <h3>The flex-flow:row-reverse wrap</h3>
        <div id="main">
            <div style="background-color:#009900;">1</div>
            <div style="background-color:#00cc99;">2</div>
            <div style="background-color:#0066ff;">3</div>
            <div style="background-color:#66ffff;">4</div>
            <div style="background-color:#660066;">5</div>
            <div style="background-color:#663300;">6</div>
        </div>
    </body>
      
    </html>

    Producción:

  • ajuste de columna: organiza la fila igual que la fila pero de arriba a abajo y la propiedad de ajuste se usa para invertir el flujo de los elementos flexibles cuando se ajustan a nuevas líneas.
    Sintaxis: 
    flex-flow:column wrap;

    Ejemplo:

    <!DOCTYPE html>
      
    <head>
        <title>flex-flow property</title>
        <style>
            #main {
                width: 400px;
                height: 300px;
                border: 2px solid black;
                display: flex;
                flex-flow: column wrap;
            }
              
            #main div {
                width: 100px;
                height: 50px;
            }
              
            h1 {
                color: #009900;
                font-size: 42px;
                margin-left: 50px;
            }
              
            h3 {
                margin-top: -20px;
                margin-left: 50px;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <h3>The flex-flow:column wrap</h3>
        <div id="main">
            <div style="background-color:#009900;">1</div>
            <div style="background-color:#00cc99;">2</div>
            <div style="background-color:#0066ff;">3</div>
            <div style="background-color:#66ffff;">4</div>
            <div style="background-color:#660066;">5</div>
            <div style="background-color:#663300;">6</div>
        </div>
    </body>
      
    </html>

    Producción:

  • ajuste de columna inversa: organiza la fila de la misma manera que la fila inversa de arriba a abajo. y la propiedad wrap se usa para invertir el flujo de los elementos flexibles cuando se ajustan a nuevas líneas.
    Sintaxis: 
    flex-flow:column-reverse wrap;

    Ejemplo:

    <!DOCTYPE html>
      
    <head>
        <title>flex-flow property</title>
        <style>
            #main {
                width: 400px;
                height: 300px;
                border: 2px solid black;
                display: flex;
                flex-flow: column-reverse wrap;
            }
              
            #main div {
                width: 100px;
                height: 50px;
            }
              
            h1 {
                color: #009900;
                font-size: 42px;
                margin-left: 50px;
            }
              
            h3 {
                margin-top: -20px;
                margin-left: 50px;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <h3>The flex-flow:column-reverse wrap</h3>
        <div id="main">
            <div style="background-color:#009900;">1</div>
            <div style="background-color:#00cc99;">2</div>
            <div style="background-color:#0066ff;">3</div>
            <div style="background-color:#66ffff;">4</div>
            <div style="background-color:#660066;">5</div>
            <div style="background-color:#663300;">6</div>
        </div>
    </body>
      
    </html>

    Producción:

  • Row wrap-reverse: organiza la fila de la misma manera que la dirección del texto y la propiedad wrap-reverse Esta propiedad se usa para invertir el flujo de los elementos flexibles cuando se ajustan a nuevas líneas.
    Sintaxis: 
    flex-flow:row wrap-reverse;

    Ejemplo:

    <!DOCTYPE html>
      
    <head>
        <title>flex-flow property</title>
        <style>
            #main {
                width: 400px;
                height: 300px;
                border: 2px solid black;
                display: flex;
                flex-flow: row wrap-reverse;
            }
              
            #main div {
                width: 100px;
                height: 50px;
            }
              
            h1 {
                color: #009900;
                font-size: 42px;
                margin-left: 50px;
            }
              
            h3 {
                margin-top: -20px;
                margin-left: 50px;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <h3>The flex-flow:row wrap-reversep</h3>
        <div id="main">
            <div style="background-color:#009900;">1</div>
            <div style="background-color:#00cc99;">2</div>
            <div style="background-color:#0066ff;">3</div>
            <div style="background-color:#66ffff;">4</div>
            <div style="background-color:#660066;">5</div>
            <div style="background-color:#663300;">6</div>
        </div>
    </body>
      
    </html>

    Producción:

  • row-reverse wrap-reverse: organiza la fila en la dirección opuesta del texto y la propiedad wrap-reverse Esta propiedad se usa para invertir el flujo de los elementos flexibles cuando se ajustan a nuevas líneas.
    Sintaxis: 
    flex-flow:row-reverse wrap-reverse;

    Ejemplo:

    <!DOCTYPE html>
      
    <head>
        <title>flex-flow property</title>
        <style>
            #main {
                width: 400px;
                height: 300px;
                border: 2px solid black;
                display: flex;
                flex-flow: row-reverse wrap-reverse;
            }
              
            #main div {
                width: 100px;
                height: 50px;
            }
              
            h1 {
                color: #009900;
                font-size: 42px;
                margin-left: 50px;
            }
              
            h3 {
                margin-top: -20px;
                margin-left: 50px;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <h3>The flex-flow:row-reverse wrap-reversep</h3>
        <div id="main">
            <div style="background-color:#009900;">1</div>
            <div style="background-color:#00cc99;">2</div>
            <div style="background-color:#0066ff;">3</div>
            <div style="background-color:#66ffff;">4</div>
            <div style="background-color:#660066;">5</div>
            <div style="background-color:#663300;">6</div>
        </div>
    </body>
      
    </html>

    Producción:

  • column wrap-reverse: organiza la fila igual que la fila pero de arriba a abajo. Y propiedad wrap-reverse Esta propiedad se usa para invertir el flujo de los elementos flexibles cuando se ajustan a nuevas líneas.
    Sintaxis: 
    flex-flow:column wrap-reverse;

    Ejemplo:

    <!DOCTYPE html>
      
    <head>
        <title>flex-flow property</title>
        <style>
            #main {
                width: 400px;
                height: 300px;
                border: 2px solid black;
                display: flex;
                flex-flow: column wrap-reverse;
            }
              
            #main div {
                width: 100px;
                height: 50px;
            }
              
            h1 {
                color: #009900;
                font-size: 42px;
                margin-left: 50px;
            }
              
            h3 {
                margin-top: -20px;
                margin-left: 50px;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <h3>The flex-flow:column wrap-reverse</h3>
        <div id="main">
            <div style="background-color:#009900;">1</div>
            <div style="background-color:#00cc99;">2</div>
            <div style="background-color:#0066ff;">3</div>
            <div style="background-color:#66ffff;">4</div>
            <div style="background-color:#660066;">5</div>
            <div style="background-color:#663300;">6</div>
        </div>
    </body>
      
    </html>

    Producción:

  • column-reverse wrap-reverse: Organiza la fila de la misma manera que la propiedad row-reverse de arriba a abajo y wrap-reverse Esta propiedad se usa para invertir el flujo de los elementos flexibles cuando se ajustan a nuevas líneas.
    Sintaxis: 
    flex-flow:column-reverse wrap-reverse;

    Ejemplo:

    <!DOCTYPE html>
      
    <head>
        <title>flex-flow property</title>
        <style>
            #main {
                width: 400px;
                height: 300px;
                border: 2px solid black;
                display: flex;
                flex-flow: column-reverse wrap-reverse;
            }
              
            #main div {
                width: 100px;
                height: 50px;
            }
              
            h1 {
                color: #009900;
                font-size: 42px;
                margin-left: 50px;
            }
              
            h3 {
                margin-top: -20px;
                margin-left: 50px;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <h3>The flex-flow:column-reverse wrap-reverse</h3>
        <div id="main">
            <div style="background-color:#009900;">1</div>
            <div style="background-color:#00cc99;">2</div>
            <div style="background-color:#0066ff;">3</div>
            <div style="background-color:#66ffff;">4</div>
            <div style="background-color:#660066;">5</div>
            <div style="background-color:#663300;">6</div>
        </div>
    </body>
      
    </html>

    Producción:

Navegador compatible:

  • Google Chrome 29.0
  • Internet Explorer 11.0
  • Mozila Firefox 28.0
  • Safari 9.0
  • Ópera 17.0

Publicación traducida automáticamente

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *