1Diapositiva 12

Apuntes

[Diapositiva 1] Fundamentos de Flex b ox en la Maquetación Web Uso de etiquetas HTML, ejes , líneas y propiedades clave Ing. Franshesca Lamadrid Bringas [Diapositiva 2] ¿ Qué es Flexbox? • Sistema de maquetación en CSS. • Distribuye espacio entre elementos en una sola dimensión . • Facilita el diseño adaptable y ordenado . [Diapositiva 3] Etiqueta <div> en HTML • Contenedor genérico de bloques . • Se aplica Flexbox al contenedor padre (div). Ejemplo : <div class=' contenedor '> <div class='item'>1</div> <div class='item'>2</div> </div> [Diapositiva 4] Etiqueta <div> en HTML [Diapositiva 5] Concepto de Ejes en Flexbox • Eje principal (main axis): Dirección de los elementos . • Eje cruzado (cross axis): Perpendicular al eje principal. • Depende del valor de 'flex-direction'. ➡️ row (horizontal) / ⬇️ column (vertical) [Diapositiva 6] Líneas de Inicio y Fin • Flexbox organiza elementos de start a end. • Cambia según la dirección : - row: izquierda ➝ derecha - row-reverse: derecha ➝ izquierda - column: arriba ➝ abajo - column-reverse: abajo ➝ arriba [Diapositiva 7] [D...