Puede verse en accíón en este link
Created
June 4, 2025 12:23
-
-
Save kurotori/da34d8fb87269ee105b2b5759596e8f9 to your computer and use it in GitHub Desktop.
Ejemplo de Flexbox
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, body{ | |
| width: 100%; | |
| height: 100%; | |
| margin: 0px; | |
| } | |
| .fila{ | |
| position: relative; | |
| width: 100%; | |
| } | |
| .columna { | |
| position: relative; | |
| height: 100%; | |
| float: left; | |
| } | |
| .altura_020 { height: 20%; } | |
| .altura_060 { height: 60%; } | |
| .altura_1_3 { height: calc( 100% /3 ); } | |
| .ancho_020 { width: 20%; } | |
| .ancho_060 { width: 60%; } | |
| .esCuadrado { aspect-ratio: 1 / 1; } | |
| .fondo_verdeClaro { background-color: lightgreen; } | |
| .fondo_rojoClaro { background-color: lightcoral; } | |
| .fondo_azulClaro { background-color: lightblue; } | |
| .margen_5px { margin: 5px; } | |
| #principal { | |
| display: flex; | |
| flex-direction: row; /* Dirección de los elementos*/ | |
| justify-content: center; /* Alineación de elementos en la dimensión del flex */ | |
| align-items: center; /* Alineación de elementos en la OTRA dimensión */ | |
| } | |
| #contenido{ | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| justify-content: space-around; | |
| align-items: center; | |
| overflow-y: scroll; | |
| min-width: 250px; | |
| max-width: 600px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <link rel="stylesheet" href="estilo.css"> | |
| </head> | |
| <body> | |
| <div class="fila columna" id="principal"> | |
| <div class="altura_060 ancho_060 fondo_azulClaro" id="contenido"> | |
| <div class="altura_1_3 esCuadrado fondo_rojoClaro margen_5px"></div> | |
| <div class="altura_1_3 esCuadrado fondo_verdeClaro margen_5px" ></div> | |
| <div class="altura_1_3 esCuadrado fondo_rojoClaro margen_5px" ></div> | |
| <div class="altura_1_3 esCuadrado fondo_rojoClaro margen_5px"></div> | |
| <div class="altura_1_3 esCuadrado fondo_verdeClaro margen_5px" ></div> | |
| <div class="altura_1_3 esCuadrado fondo_rojoClaro margen_5px" ></div> | |
| <div class="altura_1_3 esCuadrado fondo_rojoClaro margen_5px"></div> | |
| <div class="altura_1_3 esCuadrado fondo_verdeClaro margen_5px" ></div> | |
| <div class="altura_1_3 esCuadrado fondo_rojoClaro margen_5px" ></div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment