Índice del curso de HTML5

  1. Introducción
  2. Estructura de una página web
  3. Comentarios
  4. Encabezados y párrafos
  5. Imágenes
  6. Enlaces
  7. Video y audio
  8. Listas
  9. Ejercicio resumen de fundamentos de HTML
  10. iframes
  11. Páginas de consulta
  12. Tablas
  13. Estilos en línea
  14. Unidades de medida
  15. Capas
  16. Hacer una NewsLetter con HTML
  17. favicon
  18. Hojas de estilos
  19. Selectores CSS
  20. Algunos estilos de CSS3
    1. Motores de navegación
    2. text-shadow
    3. border-radius, box-shadow
    4. border-image
    5. Ejercicio - background centrado
    6. background-size
    7. Multiple Background & size
    8. background con rgba
    9. Gradientes
    10. Fuentes
    11. columns
    12. Animaciones con transition
    13. text-overflow
    14. transform
  21. GIMP
  22. display:block, inline, inline-block
  23. Margin Collapse
  24. padding y width
  25. Ejercicios de maquetación vertical
  26. Hacer una newsletter responsive sin media queries
  27. img vs background
  28. Flexbox
  29. Algunos tips
    1. Pintar el color de fondo de una línea
    2. Incrustar una imagen
    3. Sangría francesa (hanging intent)
    4. Capitalizar una letra
    5. Eliminar el borde (outline) del elemento activo
    6. contenteditable
    7. Soporte para textos asiáticos
    8. wbr - Word Break
  30. Ejercicios de HTML
  31. Break! - gran día de repaso
  32. Links de interés
  33. position
  34. Opacidades
  35. Popups con CSS
  36. Ejercicio - Galería de fotos
  37. Navigation Bar
  38. !important
  39. Páginas reales
  40. Grid Layout
  41. Selectores avanzados de CSS
  42. HTML5: definición y ejemplos
  43. HTML5 vs HTML4
  44. divs semánticos
  45. svg
  46. Formularios
  47. Animaciones con CSS3
  48. Responsive design
  49. Más ejercicios de html
  50. Página de error 404
  51. Insertar el buscador de google
  52. Dominio y alojamiento
  53. Ejercicio - Proyecto
  54. Ejercicio - Clientes y proveedores

Flexbox

Usando display:flex o display:inline-flex en una capa, la convertimos en un contenedor flexible. En el primer caso, la capa se comporta con respecto a otros elementos de la página como si tuviese display:block, en el segundo, como si tuviese display:inline-block

Ver videotutorial introductorio de Flexbox

flex-direction

Especifica como se sitúan los elementos flexibles dentro del contenedor.

Alinear contenido abajo

La siguiente maquetación es muy típica cuando estamos haciendo páginas webs.

<style>
.fila{
	display: flex;
	width: 600px;
	justify-content: space-between;
}
.col{
	display: flex;
	position: relative;
	flex-direction: column;
	text-align: justify;
	width: 45%
}
.col a{
	margin-top: auto;
	display: block;
	text-align: center;
	width: 100%
}
</style>
<div class="fila">
	<div class="col">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores esse, obcaecati quisquam, aperiam reprehenderit!</p>
		<a href="#">Enlace</a>
	</div>
	<div class="col">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, odio est cum similique velit, animi cupiditate tempore cul</p>
		<a href="#">Enlace</a>
	</div>
</div>
Alinear contenido abajo

flex-wrap

  • wrap: Los elementos de la capa se distribuirán en una o varias filas en función de su tamaño.
  • nowrap: Los elementos de la capa estarán sí o sí en una sola fila.
Ver ejemplo de flex-wrap

flex-flow

flex-flow:row wrap;

O lo que es lo mismo:

flex-direction: row;
flex-wrap: wrap
Ver ejemplo flex-flow

Ejercicio 3 columnas con flex

background para ejercicio html

Ejercicio 3 columnas con flex

Ejercicio anuncios en columnas con flex

Ver ejercicio anuncios en columnas

order

Podemos establecer el orden en el que aparecen los componentes de una caja flexible. Por defecto aparecerán tal y como aparecen en el código HTML (equivale a order: 0)

Ver ejemplo de uso de order

align-items

#wrapper{
	display: flex;
	align-items: flex-start | flex-end | center | baseline | stretch;
}
alinear elementos  verticalmente con display:flex Ejemplo

Align self

#wrapper{
	display: flex;
	align-self: flex-start | flex-end | center | baseline | stretch;
}
alinear un único elemento verticalmente con display flex Ejemplo

justify-content

#wrapper{
	display: flex;
	justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
justificación de elementos con display flex Ejemplo

flex:resumen

Flexy Boxes

Flexbox Froggy

Ejemplo

Cambiar el tamaño de las columnas con flex

<style>
	.container{
		display: flex;
	}

	.rosa{
		background: pink;
		flex-basis: 100px
	}

	.naranja{
		background: orange;
	}
</style>

<div class="container">
	<div class="col rosa">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A cupiditate magnam veniam architecto cum eligendi distinctio, voluptates, ipsa inventore autem et possimus eius suscipit esse deleniti hic porro repellat dolore.</div>
	<div class="col naranja">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, ducimus? Iusto quisquam, nam expedita animi? Sint delectus temporibus impedit praesentium ratione, officiis harum accusamus dolor, error doloribus iste quisquam animi!</div>
</div>
Ver ejemplo

flex: abreviatura de flex-grow, flex-shrink, flex-basis

Nos permite establecer cómo crece o decrece un elemento flexible dentro del contenedor en relación a los demás.

<style>
	.container{
		display: flex;
	}

	.rosa{
		background: pink;
		flex: 1
	}
	.naranja{
		background: orange;
		flex: 3
	}
</style>

<div class="container">
	<div class="col rosa">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A cupiditate magnam veniam architecto cum eligendi distinctio, voluptates, ipsa inventore autem et possimus eius suscipit esse deleniti hic porro repellat dolore.</div>
	<div class="col naranja">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, ducimus? Iusto quisquam, nam expedita animi? Sint delectus temporibus impedit praesentium ratione, officiis harum accusamus dolor, error doloribus iste quisquam animi!</div>
</div>
Ver ejemplo

Esta propiedad se puede volver más compleja, porque puede tener tres parámetros: flex-grow, flex-shrink y flex-basis.

Ejemplo

Supongamos que tenemos un contenedor al que llamaremos "wrapper" que tiene 300px de ancho.

#wrapper { display: flex;}

este contenedor tiene en su interior dos elementos, col1 y col2, que no tienen un ancho especificado. Vamos a establecer los siguientes valores para ambos de la propiedad flex: flex-grow, flex-shrink, flex-basis:

.col1 { flex: 3 1 100px;}
.col2 { flex: 1 2 100px;}

Como hemos establecido un flex-basis para cada elemento de 100px, nos quedarán aún 100px libres sin ocupar (300px del contenedor menos 100px del elemento col y menos 100px del elemento col2). ¿Como se reparte ese espacio disponible entre los elementos col1 y col2? En función del flex-grow: 3 partes para el elemento B (75px) y una parte para el elemento C (25px). Es decir, de inicio el elemento B ocupará 100px+75px = 175px de los 300px disponibles que mide el elemento A, y el elemento C ocupará 100px+25px=125px de los 300px disponibles del elemento A.

Ahora bien, supongamos que el elemento contenedor A mide 170px y no 300px. Eso quiere decir que habrá espacio negativo, porque los elementos B y C tienen un flex-basis de 100px cada uno, es decir, 200px, que es 30px mayor que los 170px del contenedor. En este caso el ratio que se usa es el flex-shrink, que recordemos que era 1 para el elemento B y 2 para el elemento C. Esos 30px se restarán del ancho de los elementos B y C en función de dicho ratio: al elemento B se le quitarán 10px y al elemento C se le quitarán 20px.

  • flex-grow: Especifica el factor de crecimiento, es decir, cuanto crecerá el elemento en relación a los demás cuando hay espacio disponible del contenedor a ocupar. Por defecto es ‘0’, que es el valor que dimos en el ejemplo anterior a los tres elementos.
  • flex-shrink: Determina el factor de reducción, es decir, cuanto decrecerá el elemento en relación a los demás cuando hay espacio negativo en el contenedor (el contenedor es más pequeño de los anchos combinados de los elementos que hay en su interior). Por defecto es ‘1’.
  • flex-basis: Toma el mismo valor que la propiedad ‘width’ y establece el tamaño inicial del elemento antes de distribuir el espacio libre de acuerdo con los ratios de flex-grow o flex-shrink. Cuando se omite, su valor es ‘main-size’ (anteriormente, ‘auto’).
Ejemplo de uso de flex
icono de mandar un mail¡Contacta conmigo!
Pablo Monteserín
contacta conmigoPablo Monteserín

Para dudas técnicas sobre los ejercicios de mis cursos es necesario estar suscrito.