html5 y css3
//

Flex e inline-flex de Flexbox en CSS y HTML

Flexbox permite ubicar elementos dentro de un contenedor así definido en un fichero HTML las primeras características que hay que conocer para dominar esta forma de maquetar son las propiedades flex e inline-flex del atributo display de CSS.

Observando el siguiente ejemplo separando en dos ambos ficheros el HTML y CSS, hemos definido un contenedor general y dentro de él otro que tiene la propiedad en su propiedad display de CSS, primero el atributo flex y luego inline-flex.

Estructura básica del fichero html
<!DOCTYPE html>
<html lang="es">
<head>
   <meta charset="UTF-8">
   <meta name="viewport"content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="css/flex_e_inline-flex.css">
   <title>Estructura Básica</title>
</head>
<body>
   <div id="contenedor-principal">
      <h3>Contenedor Principal</h3>
      <div class="contenedor-flex">
         <div id="elemento-flex-1">elemento-1</div>
         <div id="elemento-flex-2">elemento-2</div>
         <div id="elemento-flex-3">elemento-3</div>
         <div id="elemento-flex-4">elemento-4</div>
         <div id="elemento-flex-5">elemento-5</div>
      </div>
   </div>
</body>
</html>
Contenido de la hoja de estilo
#contenedor-principal {
   width: 1000px;
   background: whitesmoke;
   padding:10px;
}
#contenedor-principal h3{
   text-align:center;
}
.contenedor-flex{
   display: flex;
   background: greenyellow;
   margin:10px;
   padding:10px;
}
#elemento-flex-1,
#elemento-flex-2,
#elemento-flex-3,
#elemento-flex-4,
#elemento-flex-5 {
   margin: 5px;
   padding: 5px;
   border: 1px solid black;
}

La diferencia entre variar la propiedad display entre la opción flex o inline-flex radica en el ancho que toma el contenedor-flex.Este pasa de ser el ancho del contenedor principal, para el primer caso, a ser del ancho total de la suma de elementos contenidos en él.

Hay que tener presente también que sin introducir ninguna otra propiedad, los elementos por defecto se muestran en línea y se muestran de izquierda a derecha.

Propiedad display: flex en el contenedor flex
Propiedad display: inline-flex en el contenedor flex

Las imágenes anteriores muestran cada ejercicio por independiente pero, en cuanto a Flexbox se refiere, es posible anidar contenedores para que actúen de forma independiente. Esto mismo es lo que se ha hecho en el siguiente desarrollo permitiendo de esta forma afianzar este concepto básico e importante del conocimiento de Flexbox con CSS y HMTL. Es necesario advertir que para que no exista desbordamiento, en esta fase inicial, y sin ningúna propiedad más de Flexbox, el contenedor principal ha de tener un ancho mayor que la longitud total de los elementos apilados linealmente.

Ver ejemplo

 

Deja una respuesta