====== Desarrollo Web Lección 6 - Medios ======
===== Flexbox =====
==== Objetivo ====
En esta actividad, aprenderá una herramienta moderna muy poderosa para diseñar sus páginas.

==== Preparacion ====
  * Continuaremos usando 'media.php' y 'style.css' para esta actividad. Aquí está el código hasta ahora si lo necesita.
  * [[https://techschool.murraygunn.id.au/webdev/classes/media/4/media.es.php|media.php]]
  * [[https://techschool.murraygunn.id.au/webdev/classes/media/4/style.php|style.css]]

==== Flexbox ====
  * Ya hemos probado algunas herramientas para diseñar páginas. Podemos configurar nuestros elementos entre sí, fijar su posición en la página o incluso su posición en la pantalla. Estos funcionan muy bien si conoce el tamaño y la orientación de la pantalla del usuario.
  * Pero los usuarios no siempre tienen el mismo tamaño de pantalla, y con la introducción de tabletas y teléfonos móviles que se pueden girar, la mayoría de los diseños de hace diez años se verán horribles hoy.
  * Afortunadamente, ahora tenemos mejores herramientas disponibles que responden al tamaño de la pantalla del usuario con un diseño más flexible.
  * Para demostrar esto, crearemos un álbum de fotos usando algunas imágenes extraídas de Google.
<code>        <div id="album">
                <img src="https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
                <img src="https://images.ctfassets.net/hrltx12pl8hq/61DiwECVps74bWazF88Cy9/2cc9411d050b8ca50530cf97b3e51c96/Image_Cover.jpg?fit=fill&w=480&h=270" />
                <img src="https://images.ctfassets.net/hrltx12pl8hq/3MbF54EhWUhsXunc5Keueb/60774fbbff86e6bf6776f1e17a8016b4/04-nature_721703848.jpg?fit=fill&w=480&h=270" />
                <img src="https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455__340.jpg" />
                <img src="https://www.gettyimages.es/gi-resources/images/500px/983794168.jpg" />
                <img src="https://media.istockphoto.com/photos/concept-of-an-open-magic-book-open-pages-with-water-and-land-and-picture-id1279460648?b=1&k=20&m=1279460648&s=170667a&w=0&h=uZa830sWo8hlFN0Y7FnQ14giNC0Z2EBNuTMuNJeJhQg=" />
        </div></code>
  * Note que las imágenes están en un contenedor llamado 'álbum'. Esto es para que podamos aplicar nuestro CSS directamente a este contenedor y nada más, aunque todo lo que hemos hecho hasta ahora se aplicará dentro del contenedor a menos que se anule. <div>
  * Siéntase libre de reemplazar estas imágenes con otras que prefiera. También siéntase libre de agregar más imágenes si lo desea.
  * Abra la página (guarde y cargue los archivos primero), luego desmaximice la pantalla (haga clic en el cuadrado al lado de la 'x' para cerrar la pantalla) y cambie el tamaño manualmente. ¿Ves cómo cambia la cantidad de imágenes en cada línea para que no podamos cortar los lados de las imágenes? Puede que tenga que desplazarse hacia arriba y hacia abajo para verlos todos, pero nunca tendrá que desplazarse hacia la izquierda o hacia la derecha.
  * Esto se debe a que su navegador maneja el ajuste de elementos en línea automáticamente.
  * Pero también observe que en pantalla completa, todas las imágenes se desplazan hacia la izquierda, dejando mucho espacio vacío a la derecha. Ajustaremos el espaciado para que se vea mejor en cualquier pantalla.
  * Para ello, utilizaremos la opción de visualización 'flex'.
<code>#album {
  display: flex;
}</code>
  * Prueba este código solo. En realidad se ve peor, ¿verdad? Las imágenes ya no se ajustan a la siguiente línea.
  * A veces eso es lo que quieres. Por ejemplo, puede tener un control deslizante que se desplaza automáticamente por las imágenes. Pero eso no es lo que necesitamos aquí.
  * Podemos volver a habilitar el ajuste con el siguiente código.
<code>    flex-wrap: wrap;</code>
  * Prueba eso y verás la diferencia.
  * Nuevo, esencialmente regresamos a donde comenzamos, pero cuando agregamos la siguiente línea, se ve mucho mejor.
<code>    justify-content: space-around;</code>
  * Echa otro vistazo. Ahora el espacio libre se comparte entre todos los espacios entre las fotos y los bordes. Dependiendo de los tamaños de imagen, esto puede parecer un poco complicado cuando tiene diferentes cantidades de imágenes en cada línea. Otra opción que funciona bien es esta. 
<code>    justify-content: space-between;</code>
  * Ahora el espacio libre se comparte solo entre los espacios entre imágenes, mientras que los bordes exteriores permanecen fijos.

==== Codigo Final ====
  * [[https://techschool.murraygunn.id.au/webdev/classes/media/5/media.es.php|media.php]]
  * [[https://techschool.murraygunn.id.au/webdev/classes/media/5/style.php|style.css]]
  * [[https://techschool.murraygunn.id.au/webdev/classes/media/5/media.php|resultado]]

[[es:web_development:media:php|Siguiente: Matrices de PHP]]