CSS Flexbox (caja flexible)

Tabla de contenido

Mostrar tabla de contenidos

1

2

3

4

5

6

7

8

Pruébelo usted mismo →

<!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>Flexible Boxes</h1>

<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>

<p>Try to resize the browser window.</p>
<p>A container with "flex-wrap: nowrap;" will never wrap its items.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>

</body>
</html>

Módulo de diseño CSS Flexbox

Antes del módulo Flexbox Layout, había cuatro modos de diseño:

Block: En forma de bloque, para secciones de una página web
Inline: En línea, para texto
Table: Tabla, para datos de tablas bidimensionales
Positioned: Posicionado, para la posición explícita de un elemento

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

Soporte del navegador

Las propiedades de flexbox son compatibles con todos los navegadores modernos.


29.0	11.0	22.0	10	48

Elementos de caja flexible

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

1

2

3

El elemento de arriba representa un contenedor flexible (el área azul) con tres elementos flexibles.

Ejemplo

Un contenedor flexible con tres elementos flexibles:

<div 
  class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Pruébelo usted mismo →

<!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>

<h1>Create a Flex Container</h1>

<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>

Aprenderá más sobre contenedores flexibles y elementos flexibles en los próximos capítulos.