CSS Flexbox

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>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;
}
.flex-container>div {
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>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;
}

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>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>
</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;
}
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>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>
</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 style="order: 3">1</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 style="flex-grow: 1">1</div>
</div>

CSS Flexbox

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

CSS Flexbox

Cargado por

Copyright:

Formatos disponibles

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

Para empezar a utilizar el modelo Flexbox, es necesario definir primero un recipiente

Un contenedor de flexión con tres artículos de la flexión:

Las propiedades de contenedores flexibles son:

La flex-directionpropiedad define en qué dirección quiere que el contenedor para apilar

La flex-wrappropiedad especifica si los elementos flexibles deben envolver o no.

La envoltura valor especifica que los elementos flexibles se envuelva si es necesario:

<p>Try resizing the browser window.</p>

.flex-container > div {

<p>Try resizing the browser window.</p>

La flex-flowpropiedad es una propiedad abreviada para establecer tanto el flex-

The flex-flow Property

La justify-contentpropiedad se utiliza para alinear los elementos de la flexión:

El centro de valor alinea los elementos de flexión en el centro del recipiente:

La align-itemspropiedad se utiliza para alinear los elementos de flexión vertical.

El centro de valor alinea los elementos de flexión en el centro del recipiente:

La propiedad align de contenido

La align-contentpropiedad se utiliza para alinear las líneas de flexión.

El flex-inicio valor se muestran las líneas de flexión en la salida del contenedor:

El flex-end valor se muestran las líneas de flexión en el extremo del recipiente:

En el siguiente ejemplo vamos a resolver un problema de estilo muy común: centrado

SOLUCIÓN: Ajuste tanto el justify-contenty align-itemspropiedades al centro, y el

La orderpropiedad especifica el orden de los elementos flexibles.

El valor del pedido debe ser un número, el valor por defecto es 0.

El fin de la propiedad puede cambiar el orden de los elementos de la flexión:

La flex-growpropiedad especifica la cantidad de un elemento de flexión crecerá en

El valor debe ser un número, el valor por defecto es 0.

También podría gustarte