
La propiedad flex-wrap en CSS determina si los elementos flexibles deben estar contenidos en una sola línea o pueden envolverse en varias líneas. Si se permite el envoltorio, podemos usar esta propiedad para especificar el orden de apilamiento de las líneas.
Funciones flex-wrap css
Valor inicial | nowrap |
---|---|
Aplicado a | Contenedores flexibles. |
Heredable | No |
Móvil | No |
Valor calculado | Como se especificó. |
/* flex-wrap */ flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse; /* Variables Globales */ flex-wrap: inherit; flex-wrap: initial; flex-wrap: unset;
Ejemplos y aplicaciones en código
Este ejemplo demuestra el uso de la wrap
, nowrap
y wrap-reverse
con flex-wrap
atributo, palabras clave para mostrar cómo los elementos serán envolver después de que exceden la anchura del contenedor.
< p > < code > flex-wrap: wrap </ code > : </ p > < div class = "content" > < div class = "red" > 1 </ div > < div class = "green" > 2 </ div > < div class = "blue" > 3 </ div > </ div > < p > <code > flex-wrap: nowrap </ code > : </ p > < div class = "content1" > < div class = "red" > 1 </ div > < div class = "green" > 2 </ div > < div class = "blue" > 3 </ div > </ div > < p > <code >flex-wrap: wrap-reverse </ code > : </ p > < div class = "content2" > < div class = "red" > 1 </ div > < div class = "green" > 2 </ div > < div class = "blue" > 3 </ div > </ div >
Código CSS:
.content, .content1, .content2 { color: #fff; font: 24px/100px sans-serif; height: 150px; text-align: center; } .content div, .content1 div, .content2 div { height: 50%; width: 50%; } .red { background-color: salmon; } .green { background-color: lightseagreen; } .blue { background: steelblue; } .content { display: flex; flex-wrap: wrap; } .content1 { display: flex; flex-wrap: nowrap; } .content2 { display: flex; flex-wrap: wrap-reverse; }
Soporte de navegadores
Característica | Chrome | Firefox | IE | Opera | Safari |
---|---|---|---|---|---|
Soporte básico | 29.0 | 20.0 | 11 | 12.5 | 9.0 |
Las versiones anteriores de algunos navegadores (como Chrome, IE y Safari) admitían flexbox pero con un uso anterior ( -webkit-
o -ms-
).
Características generales
La propiedad acepta flex-wrap
una de las siguientes palabras reservadas.
nowrap
Los elementos flex se colocarán en una sola línea, lo que puede hacer que el contenido se salga de su contenedor si no cabe en él.
wrap
Los elementos flexibles se colocarán en varias líneas si es necesario, y la dirección de la envoltura será de arriba a abajo.
wrap-reverse
Como en la palabra reservada wrap
, pero el sentido del giro está invertido.
Estructura flex-wrap css
flex-wrap: nowrap | wrap | wrap-reverse;
Consulte también
- P página de sub-propiedades que esta conjuntos de propiedades son:
flex-basis
,flex-direction
,flex-flow
,flex-grow
yflex-shrink
. - La página de cada una de las propiedades
width
,height
que se encarga de configurar las dimensiones del elemento. - La página de propiedades
position
que describe cómo se debe colocar el elemento en el documento.
- Introducción al Lenguaje de Programación CSS
- Características text-decoration-style en CSS
- Características text-decoration-line en CSS
- Características text-decoration-color en CSS
- Características text-decoration en CSS
- Características text-align-last en CSS
- Características text-align en CSS
- Características tab-size en CSS
- Características overflow-wrap en CSS
- Características line-break en CSS
- Características letter-spacing en CSS
- Características direction en CSS
- Características line-height en CSS
- Características font-style en CSS
- Características font-weight en CSS
- Características font-stretch en CSS
- Características font en CSS
- Características font-size-adjust en CSS
- Características font-size en CSS
- Características font-kerning en CSS
- Características font-family en CSS
- Características order en CSS
- Características justify-content en CSS
- Características flex-wrap en CSS
- Características flex-shrink en CSS
- Características flex-grow en CSS
- Características flex-flow en CSS
- Características flex-direction en CSS
- Características flex-basis en CSS
- Características flex en CSS
- Características align-self en CSS
- Características align-items en CSS
- Características align-content en CSS
- Características overflow-y en CSS
- Características overflow-x en CSS
- Características overflow en CSS
- Características padding-right en CSS
- Características padding-left en CSS
- Características padding-bottom en CSS
- Características margin-top en CSS
- Características padding-top en CSS
- Características margin-right en CSS