CSS | propiedad de envoltura flexible

La propiedad CSS flex-wrap se usa para especificar si los elementos flexibles se fuerzan en una sola línea o se ajustan en varias líneas. La propiedad flex-wrap permite habilitar la dirección de control en la que se apilan las líneas. Se utiliza para designar un formato de una sola línea o de varias líneas para flexionar elementos dentro del contenedor flexible.

Sintaxis:  

flex-wrap: nowrap|wrap|wrap-reverse|initial;

Valor por defecto: 

  • ahora rap

Valores de propiedad: 
 

  • wrap: esta propiedad se utiliza para dividir el elemento flexible en varias líneas. Hace que los elementos flexibles se ajusten a varias líneas según el ancho del elemento flexible. 
    Sintaxis: 
     
flex-wrap: wrap;
  • Ejemplo: 
     

html

<!DOCTYPE html>
<html>
<head>
    <title>flex-wrap property</title>
    <style>
        #main {
            width: 400px;
            height: 300px;
            border: 5px solid black;
            display: flex;
            flex-wrap: 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-wrap:wrap property</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: 
     

flex-wrap property

  • nowrap: 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-wrap: nowrap;
  • Ejemplo: 
     

html

<!DOCTYPE html>
<html>
<head>
    <title>flex-wrap property</title>
    <style>
        #main {
            width: 400px;
            height: 300px;
            border: 5px solid black;
            display: flex;
            flex-wrap: 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-wrap:nowrap property</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: 
     

flex-wrap property

  • wrap-reverse: esta propiedad se usa para invertir el flujo de los elementos flexibles cuando se ajustan a nuevas líneas. 
    Sintaxis: 
     
flex-wrap: wrap-reverse;
  • Ejemplo: 
     

html

<!DOCTYPE html>
<html>
<head>
    <title>flex-wrap property</title>
    <style>
        #main {
            width: 400px;
            height: 300px;
            border: 5px solid black;
            display: flex;
            flex-wrap: 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-wrap:wrap-reverse property</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: 
     

flex wrap property

  • initial: Esta propiedad se utiliza para establecerlo como valor predeterminado. 
    Sintaxis: 
     
flex-wrap: initial;
  • Ejemplo: 
     

html

<!DOCTYPE html>
<html>
<head>
    <title>flex-wrap property</title>
    <style>
        #main {
            width: 400px;
            height: 300px;
            border: 5px solid black;
            display: flex;
            flex-wrap: initial;
        }
          
        #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-wrap:initial property</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: 
     

flex wrap property

Navegadores compatibles: los navegadores compatibles con la propiedad CSS flex-wrap se enumeran a continuación: 
 

  • Google Chrome 29.0, 21.0 -webkit-
  • Internet Explorer 11.0
  • Firefox 28.0, 18.0 -moz-
  • Ópera 17.0
  • Safari 9.0, 6.0 -webkit-

Publicación traducida automáticamente

Artículo escrito por ManasChhabra2 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 *