AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
HTML Tutorial

Diseño de caja flexible CSS3, Flexbox


Next Page >>
HTML images

CSS Tutorial » Diseño de caja flexible CSS3

La caja flexible, comúnmente conocida como caja flexible, es un nuevo modelo de diseño introducido en CSS3 para crear el diseño de interfaz de usuario flexible con múltiples filas y columnas sin usar el porcentaje o los valores de longitud fija.

El modelo de diseño flexible CSS3 proporciona un mecanismo simple y poderoso para manejar la distribución del espacio y la alineación del contenido automáticamente a través de la hoja de estilo sin interferir con el marcado real.

Había cuatro modos de diseño:

El módulo de diseño de caja flexible facilita el diseño de una estructura de diseño flexible y receptiva sin usar flotación o posicionamiento.

Sintaxis:

.flex-nombre {
/* Definir propiedades aquí */
display: -webkit-flex; /* Safari */
display: flex; /* Standard syntax */
}

 

Diseño de caja flexible CSS3, Flexbox

cuadro 1 texto
cuadro 1 texto
cuadro 2 texto
cuadro 2 texto
cuadro 3 texto
cuadro 3 texto

Soporte del navegador

Element chrome browser
 Chrome
ie browser
 IE
firefox browser
 Firefox
opera browser
 Opera
safari browser
 Safari
CSS Flexbox Yes Yes Yes Yes Yes

 

Control del flujo dentro del contenedor flexible

En el modelo de caja CSS estándar, los elementos normalmente se muestran en el orden en que aparecen en el marcado HTML subyacente.

El diseño flexible le permite controlar la dirección del flujo dentro de un contenedor flexible de tal manera que los elementos se pueden colocar en cualquier dirección del flujo hacia la izquierda, hacia la derecha, hacia abajo o incluso hacia arriba.

Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Ejemplo de control de flujo dentro del contenedor flexible a lo largo del eje principal</title>
<style>
.flex-container {
width: 80%;
min-height: 300px;
margin: 0 auto;
font-size: 32px;
/* Safari */
display: -webkit-flex;
-webkit-flex-direction: row-reverse;
/* Standard syntax */
display: flex;
flex-direction: row-reverse;
border: 1px solid #666;
}
.flex-container div {
padding: 10px;
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 1; /* Standard syntax */
}
.caja1 {
background: #e84d51;
}
.caja2 {
background: #7ed636;
}
.caja3 {
background: #2f97ff;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="caja1">caja 1</div>
<div class="caja2">caja 2</div>
<div class="caja3">caja 3</div>
</div>
<p><strong>Nota:</strong> Cambie el valor de la propiedad
flex-direction de "row-reverse" a "row" para comprender
cómo funciona esta propiedad.</p>
</body>
</html>

El flujo de los elementos flexibles en un contenedor flexible se puede especificar mediante la propiedad flex-direction.

Etiquetas: Diseño de caja flexible CSS3, desplegar como caja flexible css, CSS Flexbox, flex spacer, flex basic, flexbox practice, center inline-flex, flex components, flex vs block css, flexbox list of items,

 

Control de las dimensiones de los elementos flexibles

El aspecto más importante del diseño flexible es la capacidad de los elementos flexibles para alterar su ancho o alto para llenar el espacio disponible.
Esto se logra con la propiedad flex.
Es una propiedad abreviada de las propiedades flex-grow, flex-shrink y flex-base.

Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Ejemplo de control de las dimensiones de los elementos flexibles</title>
<style>
.flex-container {
width: 80%;
min-height: 300px;
margin: 0 auto;
font-size: 32px;
display: -webkit-flex; /* Safari */
display: flex; /* Standard syntax */
border: 1px solid #666;
}
.flex-container div {
padding: 10px;
}
.caja1 {
background: #e84d51;
-webkit-flex: 1; /* Safari */
flex: 1; /* Standard syntax */
}
.caja2 {
background: #7ed636;
-webkit-flex: 2; /* Safari */
flex: 2; /* Standard syntax */
}
.caja3 {
background: #2f97ff;
-webkit-flex: 1; /* Safari */
flex: 1; /* Standard syntax */
}
</style>
</head>
<body>
<div class="flex-container">
<div class="caja1">caja 1</div>
<div class="caja2">caja 2</div>
<div class="caja3">caja 3</div>
</div>
<p><strong>Nota:</strong> Experimente con el valor de la propiedad
flexible para un elemento flexible individual para comprender cómo se calcula
la dimensión de los elementos flexibles.</p>
</body>
</html>

En el ejemplo anterior, el primer y tercer elemento flexible ocupará 1/4, es decir, 1 / (1 + 1 + 2) del espacio libre cada uno, mientras que el segundo elemento flexible ocupará 1/2, es decir, 2 / (1 + 1 + 2) del espacio libre.

 

Elementos simples de Flexbox

Para comenzar a usar el modelo Flexbox, primero debe definir un contenedor flexible.

Ejemplo

<!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>Caja 1</div>
<div>Caja 2</div>
<div>Caja 3</div>
</div>

<p>Un diseño flexible debe tener un elemento principal con
la propiedad <em> display </em> establecida en <em>flex</em>.</p>

<p>Los elementos secundarios directos del contenedor flexible se
convierten automáticamente en elementos flexibles.</p>

</body>
</html>

 



Etiquetas: Diseño de caja flexible CSS3, desplegar como caja flexible css, CSS Flexbox, flex spacer, flex basic, flexbox practice, center inline-flex, flex components, flex vs block css, flexbox list of items,
Diseño de caja flexible CSS3 - css.es

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


1
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Send forgot password by mail or message ...
PHP MySQL simple login system...
Check for duplicate username live or ema...
How to create simple search engine using...
Diseño de sitio web CSS Layout...
Diseño de caja flexible CSS3...
Botones en CSS...
ID y Clase, Diferencias entre Class e Id...
Esquina redondeada CSS...
Tamaño de caja css box-sizing: border-b...
Alineación CSS...
Altura y Anchura CSS...
Bordes CSS...
Margen CSS...
Relleno CSS...
Modelo de caja CSS...
Tablas CSS...
Listas CSS...
Enlaces CSS...
Texto CSS...