CSS3Tutoriales básicos

CSS3 Filtros (Filters)CSS3 Tamaño de cuadro (box-tamaño)

CSS3 Diseño de cajas flexibles

CSS3 Box flexible o flexbox es un nuevo modelo de diseño para crear diseños de interfaz de usuario más flexibles.

Conozca el modelo de diseño Flex

Flexible box, comúnmente conocido como flexbox, es un parte de CSS3Se introduce un nuevo modelo de diseño, llamado CSS Flex, que se utiliza para crear diseños de interfaz de usuario flexible con múltiples filas y columnas, sin usar valores de longitud fija o porcentajes.3 El modelo de diseño flex ofrece un mecanismo simple y poderoso que permite manejar automáticamente la distribución del espacio y alineación de contenido a través de hojas de estilo, sin interferir con la marca real.

Este ejemplo muestra cómo utilizar el modelo de diseño flex para crear un diseño de tres columnas, donde cada columna tiene el mismo ancho y altura.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>CSS3　Three Equal Flex Column</title>
<style>
　　　　.flex-container　{
　　　　　　　　width:　80%;
　　　　　　　　min-height:　300px;
　　　　　　　　display:　-webkit-flex;　/*　Safari　*/　　　　　
　　　　　　　　display:　flex;　
　　　　　　　　border:　1px　solid　#808080;
　　　　}
　　　　.flex-container div {
　　　　　　　　background:　#dbdfe5;
　　　　　　　　-webkit-flex:　1;　/*　Safari　*/
　　　　　　　　-ms-flex:　1;　/*　IE　10　*/
　　　　　　　　flex:　1;　
　　　　}
</style>
</head>Item　1Item　2Item　3</html>

Prueba a ver‹/›

Si observa detenidamente el código de ejemplo anterior, notará que no hemos especificado en .flex-interno del contenedor<div>especificar cualquier anchura en la parte superior, pero puede ver que la anchura de cada columna es exactamente igual al elemento padre.flex-tercio del contenedor.

cómo funciona el diseño Flex

Flexbox consta de contenedor flexible y elementos flexibles. Se puede lograr esto colocandodisplayEl atributo de elemento se establece en flex (generandoblock-level o en línea-flex (generando un contenedor flexible)inline-blockusando un contenedor en línea (flexible) (flex) para crear un contenedor flexible. Todos los elementos hijos del contenedor flexible se convierten automáticamente en elementos flexibles y se alinean usando el modelo de diseño flexible.float，clearyvertical-alignLas propiedades no tienen influencia en los elementos elásticos.

El elemento de estiramiento sigueflex-directionLa línea de estiramiento especificada por la propiedad se encuentra dentro del contenedor de estiramiento. Por defecto, cada contenedor flexible tiene una sola línea flexible, que tiene la misma dirección que el eje inline del modo de escritura actual odel mismo texto. La siguiente imagen le ayudará a entender los términos del diseño Flex.

especificar el flujo interno del contenedor Flex

En el modelo de cuadro CSS estándar, los elementos se muestran generalmente en el orden en que aparecen en la etiqueta HTML subyacente. El diseño flex permite controlar la dirección del flujo dentro de un contenedor flex, de modo que los elementos pueden estar dispuestos en cualquier dirección de flujo, ya sea hacia la izquierda, hacia la derecha, hacia abajo o incluso hacia arriba.

Se puede usarflex-directionLa propiedad especifica el flujo de los elementos flexibles en el contenedor flex. El valor predeterminado row coincide con el modo de escritura actual o la dirección del texto, por ejemplo, el inglés de izquierda a derecha.

Ejemplo

.flex-container　{
　　　　width:　80%;
　　　　min-height:　300px;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-direction: row-reverse;
　　　　
　　　　display:　flex;
　　　　flex-direction: row-reverse;
　　　　border:　1px　solid　#666;
}

Prueba a ver‹/›

Del mismo modo, puede mostrar los elementos elásticos en forma de columna dentro del contenedor elástico, en lugar de usar flex-El valor de la propiedad direction se lista como follows:

Ejemplo

.flex-container　{
　　　　width:　80%;
　　　　min-height:　300px;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-direction: column;
　　　　
　　　　display:　flex;
　　　　flex-direction: column;
}

Prueba a ver‹/›

controlar el tamaño de los elementos de estiramiento

El aspecto más importante del diseño elástico es la capacidad de los elementos elásticos para cambiar su anchura o altura para llenar el espacio disponible. Esto se logra a través defleximplementado por el atributo. Esto es un atributo de apunteflex-grow，flex-shrinkmientrasflex-baseAtributo.

El contenedor elástico distribuye el espacio disponible en proporción con su factor de crecimiento elástico a sus elementos, o los contrae para evitar desbordamiento en proporción con su coeficiente de contracción curvada.

Ejemplo

.flex-container　{
　　　　width:　80%;
　　　　min-height:　300px;
　　　　display:　-webkit-flex;　/*　Safari　*/　　　　　
　　　　display:　flex;　
}
.flex-container div {
　　　　padding:　10px;
　　　　background:　#dbdfe5;
}
.item1,　.item3　{
　　　　-webkit-flex:　1;　/*　Safari　*/
　　　　flex:　1;　
}
.item2　{
　　　　-webkit-flex:　2;　/*　Safari　*/
　　　　flex:　2;　
}

Prueba a ver‹/›

在上面的示例中，第一个和第三个伸缩项目将占用1/4，即1/(1+1+2)的自由空间，而第二个伸缩项目将占用1/2，即2/(1+1+2)的自由空间。类似地，您可以使用这个简单的技术创建其他灵活的布局。

Nota:强烈建议使用速记属性，而不是单独的flex属性，因为它可以正确重置未指定的组件。

在Flex容器中对齐Flex项目

有四个属性justify-content，align-content，align-itemsyalign-self其目的是为了指定弹性容器内的弹性项目的对准。其中的前三个适用于flex容器，而最后一个适用于单个flex项目。

沿主轴对齐Flex项目

使用justify-content属性，可以将伸缩项沿伸缩容器的主轴（即在水平方向上）对齐。通常在弹性项目未使用主轴上所有可用空间的情况下使用。

justify-content属性接受以下值：

flex-start-默认值。弹性项目放置在主轴的起点。
flex-end -Flex项目位于主轴的末端。
center　　- Flex的项目放置在主轴线的与等量的自由空间在两端的中心。如果剩余的自由空间为负，即项目溢出，则弹性项目将在两个方向上均等溢出。
space-between　-的Flex项都沿着主轴线，其中第一项放置在主起始沿和最后一个放置在主端均匀地分布。如果项目溢出或只有一项，则此值等于flex-start.
space-around　-Flex项在两端均以一半大小的空间均匀分布。如果它们溢出或只有一项，则此值等于center。

下面的示例将向您展示不同justify-content属性值对具有固定宽度的多列flex容器的影响。

Ejemplo

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-justify-content: space-around;
　　　　
　　　　display:　flex;
　　　　justify-content: space-around;
}
.item1　{
　　　　width:　75px;
　　　　background: #e84d51;
}
.item2　{
　　　　width:　125px;
　　　　background: #7ed636;
}
.item3　{
　　　　width:　175px;
　　　　background: #2f97ff;
}

Prueba a ver‹/›

沿横轴对齐Flex项目

可以使用align-items或align-self属性沿Flex容器的横轴（即垂直方向）对齐Flex项目。但是，在将align-items应用于flex容器时，该align-self属性将应用于单个flex项目，并覆盖align-items。这两个属性均接受以下值：

flex-start — Flex项目位于交叉轴的起点。
flex-end — Flex项目位于交叉轴的末端。
center　—伸缩项放置在横轴的中心，两端具有相等的可用空间。如果剩余的自由空间为负，即项目溢出，则弹性项目将在两个方向上均等溢出。
baseline　—每个弹性项目的文本基准（或内联轴）与最大的弹性项目的基线对齐font-sizesize
Estirar .-El valor por defecto de la propiedad items. Los elementos flex se estirarán para llenar la fila o columna actual, a menos que se impida por el ancho o la altura mínima y máxima. align

El siguiente ejemplo le mostrará diferentes alineaciones-El valor de la propiedad items tiene un impacto en los contenedores flex de altura fija multiple.

Ejemplo

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-align-items: center;
　　　　
　　　　display:　flex;
　　　　align-items: center;
}
.item1　{
　　　　width:　75px;
　　　　height:　100px;
　　　　background: #e84d51;
}
.item2　{
　　　　width:　125px;
　　　　height:　200px;
　　　　background: #7ed636;
}
.item3　{
　　　　width:　175px;
　　　　height:　150px;
　　　　background: #2f97ff;
}

Prueba a ver‹/›

También puede distribuir el espacio disponible en el eje transversal de un contenedor flex de múltiples filas o columnas. La propiedad align-content se utiliza para alinear las filas del contenedor flex, por ejemplo, si hay espacio libre en el eje transversal, las filas del contenedor flex de múltiples filas se alinearán-content, similar a alinear un solo elemento con el eje principal.

El alineamiento de content-La propiedad content acepta el mismo valor que justify-content, pero se aplica al eje transversal en lugar del eje principal. También acepta otro valor:

EstirarEl espacio disponible se distribuye de manera uniforme entre todas las filas o columnas para aumentar su tamaño transversal. Si el espacio libre restante es negativo, este valor es igual al flex-start.

El siguiente ejemplo le mostrará diferentes alineaciones-El valor de la propiedad content tiene un impacto en los contenedores flex de altura fija multiple.

Ejemplo

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　margin: 0 auto;
　　　　font-size:　32px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-flow: row wrap;
　　　　-webkit-align-content: space-around;
　　　　
　　　　display:　flex;
　　　　flex-flow: row wrap;
　　　　align-content: space-around;
}
.flex-container div {
　　　　width:　150px;
　　　　height:　100px;
　　　　background:　#dbdfe5;
}

Prueba a ver‹/›

Reordenar los elementos Flex

Además de cambiar el flujo dentro del contenedor flexible, también puede cambiar el usoorderLa propiedad order muestra el orden de un solo elemento flex. Esta propiedad acepta enteros positivos o negativos como valores. Por defecto, todos los elementos flex se muestran y se disponen en el orden en que aparecen en la etiqueta HTML, porque el valor por defecto de order es 0.

El siguiente ejemplo le mostrará cómo especificar el orden de un solo elemento flexible.

Ejemplo

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　display:　-webkit-flex;　/*　Safari　6.1+　*/
　　　　display:　flex;
}
.flex-container div {
　　　　padding:　10px;
　　　　width:　130px;
}
.item1　{
　　　　background: #e84d51;
　　　　-webkit-order:　2;　/*　Safari　6.1+　*/
　　　　order:　2;
}
.item2　{
　　　　background: #7ed636;
　　　　-webkit-order:　1;　/*　Safari　6.1+　*/
　　　　order:　1;
}
.item3　{
　　　　background: #2f97ff;
　　　　-webkit-order:　-1;　/*　Safari　6.1+　*/
　　　　order:　-1;
}

Prueba a ver‹/›

Nota:Los elementos con el valor de orden más bajo se colocan al frente, y los elementos con el valor de orden más alto se colocan al final. Los elementos con el mismo valor de order se mostrarán en el orden en que aparecen en el documento de origen.

Alineación horizontal y vertical de Flexbox

Por lo general, el alineamiento vertical de los bloques de contenido implica el uso de JavaScript o algunos trucos CSS rudimentarios. Sin embargo, con flexbox se puede hacer esto fácilmente sin需要进行 cualquier ajuste.

El siguiente ejemplo le mostrará cómo usar CSS3La función de cuadro flexible permite alinear vertical y horizontalmente los bloques de contenido en el medio de manera sencilla.

Ejemplo

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　display:　-webkit-flex;　/*　Safari　6.1+　*/
　　　　display:　flex;　
}
.item {
　　　　width:　300px;
　　　　padding:　25px;
　　　　margin: auto;
　　　　background: #f0e68c;
}

Prueba a ver‹/›

Habilitar el reemplazo de proyecto flexible de nueva línea

Por defecto, el contenedor flexible muestra una única fila o columna de elementos flexibles. Peroflex-wrapSi no hay suficiente espacio en una línea de ajuste, se puede usar la propiedad del contenedor flex para especificar si los elementos de ajuste se cambian a varias filas.

Este flex-La propiedad wrap acepta los siguientes valores:

nowrap-Valor predeterminado. Los elementos de ajuste se colocan en una fila. Si no hay suficiente espacio en la línea de ajuste, puede ocurrir un desbordamiento.
wrap — El contenedor flex descompone sus elementos flex en varias filas, de manera similar a cómo se descompone el texto que es demasiado ancho para caber en la fila actual y se descompone en una nueva línea.
wrap-reverse — Los elementos de ajuste se pondrán en varias filas cuando sea necesario, pero en orden inverso, es decir,punto de partida cruzado(cross-start)ypunto final cruzado(cross-end)Las direcciones se intercambiarán.

El siguiente ejemplo le mostrará cómo usar flex-La propiedad wrap muestra elementos flex en una o más filas dentro del contenedor flex.

Ejemplo

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-wrap:　wrap;
　　　　
　　　　display:　flex;
　　　　flex-wrap:　wrap;　　
}
.flex-container　div{
　　　　width:　130px;
　　　　padding:　10px;　　　　
　　　　background:　#dbdfe5;
}

Prueba a ver‹/›

Nota:También puede usar propiedades abreviadas de CSS en una declaración únicaflex-flowEstablecer flex-direction y flex-wrap. Acepta los mismos valores que los atributos individuales y los valores pueden estar en cualquier orden.

CSS3 Filtros (Filters)CSS3 Tamaño de cuadro (box-tamaño)