Manual de referencia de CSS

reglas de CSS (RULES)

大全 de Atributos CSS

Atributo float de CSS CSS3 flex-Atributo shrink

CSS3 flex-Método de uso y ejemplo del atributo wrap

flex-El atributo wrap CSS especifica si se debe forzar a los elementos flexibles a colocarse en una línea, o dividirlos en múltiples filas o columnas según el espacio disponible en el contenedor flexible.

La tabla a continuación proporciona la descripción de uso y el historial de versiones de este atributo, así como la sintaxis de uso en el script de JavaScript.

Valor predeterminado:	nowrap
Apto para:	Contenedor flexible
Herencia:	No
Animable:	No.Ver Atributos de animación。
Versión:	CSS3nuevas características
JavaScript syntax:	object.style.flexWrap="wrap-reverse"

flex-Sintaxis de uso de wrap

La sintaxis de este atributo es la siguiente:

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

Los siguientes ejemplos muestran cómo usar flex-Atributo wrap.

Ejemplo

.flex-container {
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-wrap: nowrap;
　　　　
　　　　display: flex;
　　　　flex-wrap: nowrap;
}

Prueba aquí‹/›

Valor del atributo

La tabla a continuación describe los valores de este atributo.

Valor	Descripción
nowrap	Valor predeterminado. Especificar que los elementos flexibles no se dividirán en filas o columnas.
wrap	Especificar, si es necesario, los elementos flexibles se dividirán en múltiples filas.
wrap-reverse	Igual que wrap, pero los elementos se alinearán en orden inverso.
initial	Establecer este atributo en su valor predeterminado.
inherit	Si se especifica, los elementos asociados adoptarán el flex del elemento padre-Valores del atributo wrap.

Compatibilidad del navegador

flex-La compatibilidad del navegador del atributo wrap. Los números en la tabla a continuación representan la versión más baja del navegador que admite esta propiedad; todos los navegadores principales admiten esta propiedad.

	Firefox18+ ^-moz-，28+ Google Chrome 21+ ^-webkit-，29+ Internet Explorer 11+ Apple Safari 6.1+ ^-webkit- Opera 12.1+

Leer más

Consulte los siguientes tutoriales:CSS3Diseño en columnas múltiples。

Atributos relacionados:align-content，align-items，align-self，display，flex，flex-basis，flex-direction，flex-flow，flex-grow，flex-shrink，justify-content，min-height，min-width，order。

Atributo float de CSS CSS3 flex-Atributo shrink