swap_vertical_circle

HTML & CSS / Recursos - Parte 3




<DIV's on the ROCK>
Método antiguo en desuso
2 columnas <style>
.columnas {display: flex;}
.col2 {float: left; width: 50%; margin:5px; padding:10px;}
</style> 		<body>
<div classroom="columnas">
<div classroom="col2">Contenido1</div>
<div classroom="col2">Contenido2</div>
</div>
</body>
3 columnas <style>
.columnas {display: flex;}
.col3 {float: left; width: 33.3333%; margin:5px; padding:10px;}
</style> 		<body>
<div classroom="columnas">
<div classroom="col3">Contenido1</div>
<div classroom="col3">Contenido2</div>
<div classroom="col3">Contenido3</div>
</div>
</body>

</body>
<DIV's in the BOX>
Método CSS FLEXBOX
2 columnas <style>
.columnas {display: flex;
gap: 15px;}
.col2 {flex-basis: 50%;}
</style>		 <div classroom="columnas">
<div classroom="col2">Contenido1</div>
<div classroom="col2">Contenido2</div>
</div>
3 columnas <style>
.columnas {display: flex;
gap: 15px;}
.col3 {flex-basis: 33.3333%;}
</style>		 <body>
<div classroom="columnas">
<div classroom="col3">Contenido1</div>
<div classroom="col3">Contenido1</div>
<div classroom="col3">Contenido2</div>
</div>

<FLEX in the sky>
Método CSS FLEXBOX o el manual del TETRIS
gap (gap, gap-row, gap-column) Ejemplo: gap: 15px; Resultado: Pone 1px antes y despues de cada uno de los div's
flex-direction (row, row-reverse, column, column-reverse)

 <style>
.columnas {display: flex;
gap: 15px;}
flex-direction: row;}
.col3 {flex-basis: 100%;
border: 3px solid black;
text-align: center;
}
</style>		 <body>
<div classroom="columnas">
<div classroom="col3">Contenido1</div>
<div classroom="col3">Contenido1</div>
<div classroom="col3">Contenido2</div>
</div>
</body>
El manual del TETRIS.
Haz clic en la imagen para comenzar a jugar.
Flexbox Froggy
Si eres más de jugar al Froggy que al Tetris.
Haz clic en una de las tres ranas.		 FROGGY Cheat Code Game
Haz clic en la imagen.

<DIV's DIV'S DIV'S CRAZY DIV'S>
Ejemplos de DIV's para lograrlo y no volverse loco en el intento

swap_vertical_circle Recursos de interés
Categoría Nombre URL
Recursos Web - Formación Aprender Jungando
Recursos Web - CSS Flexbox Aprender Flexbox jugando a Froggy
Recursos Web - FormaciónGoogle Actívatehttps://fonts.google.com/
Recursos Web - ICONES CSSGoogle Fontshttps://fonts.google.com/
Recursos Web - ICONES CSSFontawesomehttps://fontawesome.com/
Recursos Web WebExperto https://webexperto.com/
Directorios Web Sitios España https://www.sitiosespana.com/webmasters/
Recursos Web ABCdatos https://www.abcdatos.com/
Recursos Web La Webera https://www.lawebera.es/
Banco de imágenes Pexel https://www.pexels.com/es-es/
Banco de imágenes Freepik https://www.freepik.es/
Banco de imágenes Pixabay https://pixabay.com/
Directorio banco de imágenes Canva https://www.canva.com/