CSS Flexbox
Módulo CSS Layout Flexbox
Antes de que el módulo de Flexbox Diseño, había cuatro modos de diseño:
Bloque, por secciones en una página web
En línea, para el texto
Tabla, para de dos dimensiones de datos de tabla
Posicionada, para la posición explícita de un elemento
El cuadro de diseño del módulo flexible, hace que sea más fácil diseñar la estructura de
diseño flexible y sensible sin necesidad de utilizar flotador o posicionamiento
Elementos Flexbox
Para empezar a utilizar el modelo Flexbox, es necesario definir primero un recipiente
flexible.
1
2
3
El elemento anterior representa un recipiente flex (el área azul) con tres elementos de
flexión.
Ejemplo
Un contenedor de flexión con tres artículos de la flexión:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<p>A Flexible Layout must have a parent element with the <em>display</em> property set to
<em>flex</em>.</p>
<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>
</body>
</html>
Las propiedades de contenedores flexibles son:
flex-dirección
flex-wrap
flex-flujo
justificar el contenido
alinear-artículos
alinear-contenido
El flex-dirección del inmueble
La flex-directionpropiedad define en qué dirección quiere que el contenedor para apilar
los elementos flexibles
Ejemplo
La columna de valor pilas de los elementos de flexión verticalmente (de arriba a abajo):
.flex-container {
display: flex;
flex-direction: column;
}
Ejemplo
La columna-inversa valor pilas de los elementos de flexión vertical (pero de abajo hacia
arriba):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
La fila valor apila los elementos de flexión horizontal (de izquierda a derecha):
.flex-container {
display: flex;
flex-direction: row;
}
Ejemplo
La fila inversa valor apila los elementos de flexión horizontal (pero de derecha a izquierda):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
La propiedad flex-wrap
La flex-wrappropiedad especifica si los elementos flexibles deben envolver o no.
Los ejemplos a continuación tienen 12 elementos flexibles, para demostrar mejor la flex-
wrappropiedad.
Ejemplo
La envoltura valor especifica que los elementos flexibles se envuelva si es necesario:
.flex-container {
display: flex;
flex-wrap: wrap;
}
El nowrap valor especifica que los elementos de flex no se envuelva (esto es por defecto):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
NOWRAP
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: DodgerBlue;
}
.flex-container>div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-wrap Property</h1>
<p>The "flex-wrap: nowrap;" specifies that the flex items will not wrap (this is default):</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
<p>Try resizing the browser window.</p>
</body>
</html>
WRAP
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-wrap Property</h1>
<p>The "flex-wrap: wrap;" specifies that the flex items will wrap if necessary:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
<p>Try resizing the browser window.</p>
</body>
</html>
La propiedad de flujo de flexión
La flex-flowpropiedad es una propiedad abreviada para establecer tanto el flex-
directiony flex-wrappropiedades.
Ejemplo
.flex-container {
display: flex;
flex-flow: row wrap;
}
The flex-flow Property
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-flow: row wrap;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-flow Property</h1>
<p>The flex-flow property is a shorthand property for the flex-direction and the flex-wrap properties.</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
<p>Try resizing the browser window.</p>
</body>
</html>
La propiedad justificar contenido
La justify-contentpropiedad se utiliza para alinear los elementos de la flexión:
Ejemplo
El centro de valor alinea los elementos de flexión en el centro del recipiente:
.flex-container {
display: flex;
justify-content: center;
}
Ejemplo
El flex-inicio valor alinea los elementos de flexión al inicio del contenedor (esto es por
defecto):
.flex-container {
display: flex;
justify-content: flex-start;
}
Ejemplo
La flexión de extremo valor alinea los elementos de flexión en el extremo del recipiente:
.flex-container {
display: flex;
justify-content: flex-end;
}
Ejemplo
El espacio alrededor de valor muestra los elementos de flexión con el espacio antes, entre y
después de las líneas:
.flex-container {
display: flex;
justify-content: space-around;
}
Ejemplo
El espacio entre el valor muestra los elementos flexibles con espacio entre las líneas:
.flex-container {
display: flex;
justify-content: space-between;
}
Los align-artículos de propiedad
La align-itemspropiedad se utiliza para alinear los elementos de flexión vertical.
Ejemplo
El centro de valor alinea los elementos de flexión en el centro del recipiente:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
El flex-inicio valor alinea los elementos de flexión en la parte superior del contenedor:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
Ejemplo
La flexión de extremo valor alinea los elementos de flexión en la parte inferior del
contenedor:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
Ejemplo
El tramo de valor se extiende a los elementos flexibles para llenar el recipiente (esto es por
defecto):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
Ejemplo
La línea de base el valor alinea los elementos flexibles como sus líneas de base se alinea:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
Nota: el ejemplo se utiliza diferente tamaño de fuente para demostrar que los artículos
consigue alineados por la línea base del texto:
La propiedad align de contenido
La align-contentpropiedad se utiliza para alinear las líneas de flexión.
Ejemplo
El espacio entre valor se muestran las líneas de flexión con igual espacio entre ellos:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
Ejemplo
El espacio alrededor de valor se muestran las líneas de flexión con el espacio antes, entre y
después de ellos:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
Ejemplo
El tramo de valor se extiende a las líneas de flexión para ocupar el espacio restante (esto es
por defecto):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
Ejemplo
Los centro displays valor de visualización de las líneas de flexión en el centro del
recipiente:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
Ejemplo
El flex-inicio valor se muestran las líneas de flexión en la salida del contenedor:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
Ejemplo
El flex-end valor se muestran las líneas de flexión en el extremo del recipiente:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
centrado perfecto
En el siguiente ejemplo vamos a resolver un problema de estilo muy común: centrado
perfecto.
SOLUCIÓN: Ajuste tanto el justify-contenty align-itemspropiedades al centro, y el
elemento de flexión serán perfectamente centradas:
Ejemplo
.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
La propiedad de orden
La orderpropiedad especifica el orden de los elementos flexibles.
El primer elemento de flexión en el código no tiene que aparecer como el primer elemento
en el diseño.
El valor del pedido debe ser un número, el valor por defecto es 0.
Ejemplo
El fin de la propiedad puede cambiar el orden de los elementos de la flexión:
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
El flex-crecer Propiedad
La flex-growpropiedad especifica la cantidad de un elemento de flexión crecerá en
relación con el resto de los elementos flexibles.
El valor debe ser un número, el valor por defecto es 0.
Ejemplo
Hacer que el tercer elemento de flexión crecer ocho veces más rápido que los demás
elementos de la flexión:
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>
