Ejemplo 1. Flex direction
con la propiedad flex-direccion puedes definir si debe ser como columna o como una sola linea
FLEXBOX
El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación.
Cuando describimos a flexbox como unidimensional destacamos el hecho que flexbox maneja el layout en una sola dimensión a la vez — ya sea como fila o como columna.
Para empezar a usar Flexbox primero hay que definir un Contenedor y sus elementos. Por ejemplo:
< div class="container">
< div class="elemento">elemento 1< / div>
< div class="elemento">elemento 2< / div>
< div class="elemento">elemento 3< / div>
< / div>
Resultado:
elemento 1
elemento 2
elemento 3
para aplicar flexbox, en la hoja a de estilos hay de que poner que la clase "container" sea "display: flex;" y queda de la siguiente manera:
elemento 1
elemento 2
elemento 3
hay multimples cosas que se pueden realizar, por ahora veremos 2 ejemplos
Ejemplo 2. Flex Wrap
La propiedad flex-wrap especifica si los flex items deberian ser wrap o no.
OVERFLOW
La propiedad de CSS overflow controla que pasa con el contenido que es muy grande para un aréa.
Ejemplo 1. Overflow Visible
Por defecto, overflow es visible, lo que significa que no está recortado y se renderiza fuera de la caja del elemento.
Ejemplo 2. Overflow auto
El valor auto es similar al de desplazamiento, pero añade barras de desplazamiento sólo cuando es necesario:
TEXT-SHADOW
La propiedad CSS text-shadow aplica una sombra al texto.
En su uso más sencillo, sólo se especifica la sombra horizontal (2px) y la vertical (2px):
Ejemplo 1.
Ejemplo 2. tambien se le puede porner el color a la sombra
BOX-SHADOW
La propiedad CSS box-shadow se utiliza para aplicar una o más sombras a un elemento.
Ejemplo 1. Especificar una sombra horizontal y otra vertical
Ejemplo 2. Especifique un color para la sombra
El parámetro de color define el color de la sombra.
TRANSFORM
Las transformaciones CSS permiten mover, rotar, escalar y sesgar elementos.
Ejemplo 1. El método translate()
El método translate() mueve un elemento desde su posición actual (según los parámetros dados para el eje X y el eje Y).
El siguiente ejemplo mueve el elemento < div> 50 píxeles a la derecha y 100 píxeles hacia abajo desde su posición actual:
Ejemplo 2. El método rotate()
El método rotate() gira un elemento en el sentido de las agujas del reloj o en sentido contrario según un grado determinado.
El siguiente ejemplo gira el elemento < div> en el sentido de las agujas del reloj con 20 grados:
