Flexbox es un módulo de diseño de CSS3 que se creó para mejorar la forma en la que se hace diseño responsive, evitando así el uso de float, escribiendo menos código y facilitando el posicionamiento de elementos, incluso no teniendo noción del tamaño de éstos. Básicamente la idea de Flexbox es poder alterar el ancho, alto y posicionamiento de elementos de la mejor manera con el espacio del que disponemos.
Flexbox es un módulo completo y no una propiedad única; algunos de ellos deben declararse en el contenedor (el elemento principal, que llamamos de flex container), mientras que otros deben declararse en los elementos secundarios (el flex ítems). Si el diseño "estándar" se basa en las direcciones block e inline, el diseño Flex se basa en direcciones de "flex flow". A continuación se muestra un diagrama de la especificación, que explica la idea central detrás del diseño Flex.
Los elementos se muestran en línea, pero si su anchura supera la del contenedor, se distribuyen en varias filas.
Los elementos se visualizan de arriba hacia abajo.
La propiedad CSS overflow-y define qué se debe mostrar cuando el contenido se desborda de los extremos superior e inferior de un elemento en bloque.
El contenido no es recortado y puede ser visualizado fuera de los extremos superior e inferior del área de padding.
El contenido es recortado, si es necesario, para que se ajuste verticalmente dentro del área de padding. No se dispone de las barras de desplazamiento.
El contenido es recortado, si es necesario, para que se ajuste verticalmente dentro del área de padding. Los navegadores muestran las barras de desplazamiento independientemente de si el contenido se recorta o no (esto evita que las barras de desplazamiento aparezcan o desaparezcan cuando el contenido cambia). Las impresoras pueden imprimir el contenido desbordado.
Depende del cliente. Si el contenido se recorta dentro del área de padding, se vería igual que con la propiedad visible, pero aún determinado por un contexto de formato de bloque. Los navegadores de escritorio proveen barras de desplazamiento si el contenido se desborda.
overflow-y:hidden — Esconde el texto fuera de la caja
overflow-y:scroll — Agrega una barra scroll si se necesita
La propiedad text-shadow agrega sombra al texto. Acepta una lista de sombras separadas por coma, para aplicarlas al texto y a la propiedad text-decorations del elemento.Cada sombra es especificada como un ófset del texto, junto con valores de color y radio de difuminación opcionales.
Este es un texto para mostrar el ejemplo.
Este es un texto para mostrar el ejemplo.
La propiedad CSS box-shadow añade efectos de sombra alrededor del marco de un elemento. Se pueden definir múltiples efectos separados por comas. La caja de la sombra se describe por los desplazamientos en X e Y, los radios de desenfoque y dispersión, y el color relativos al elemento.
You may shoot me with your words,
You may cut me with your eyes,
You may kill me with your hatefulness,
But still, like air, I'll rise.— Maya Angelou
Este es un texto para mostrar el ejemplo.
La propiedad CSS transform te permite modificar el espacio de coordenadas del modelo de formato visual CSS. Usándola, los elementos pueden ser trasladados, rotados, escalados o sesgados de acuerdo a los valores establecidos.