Trabajando con el modelado de cajas CSS3.
Se define como margin (margen), al espacio que existe entre el borde y el siguiente elemento. El padding (relleno), es el espacio interior del borde del elemento y su contenido. Si se muestra el borde, los ajuste de margen y relleno tendrán ajustes distintos. Si no se muestra el borde, puede ser difícil diferenciar los ajustes de margen y relleno.
puedes establecer fácilmente el borde(border), el relleno(padding) y el margen(margin) asignando un valor a la propiedad correspondiente, como se muestra en la siguiente regla de hoja de estilo:
El estilo muestra un borde de 10px de color verde sobre las cuatro caras del contenedor. El padding (relleno) está establecido a 25px, y el margin a 15px, lo que implica que el contenido esta a 15px del borde interior y a 25px del borde superior.
De hecho si se redimensiona la ventana del navegador, el estilo css se mantendrá y se autoajustará para los valores establecidos en su estilo de margenes y medidas en proporción a la ventana del navegador.
Definir al objeto correctamente.
En el anterior ejercicio observa que he usado un border asignandolo un tamaño. Si solo utilizara esa propiedad en el estilo, no aparería ningún border.
Eso es debido que, aunque designe un tamaño de borde a un objeto, no implica que aparezca dicho estilo. Es más, por defecto no aparecerá el borde ya que tiene asignado un estilo display:none, al no asignarlo ninguna utilidad; solo le he asignado un tamaño. Y el borde está ahí. Simplemente que es invisible y no ocupa espacio en la ventana del navegador. Si comparo la ventana del navegador con borde y sin borde, puedes ver que la ventana se ajusta en 10px (el tamaño del border) al estilo.
Así que para que un objeto aparezca representado en el documento mediante css, hay que definirlo y darle unas propiedades como tamaño, y apariencia para que quede reflejado en el documento. Por esa regla de tres, si por ejemplo le asigno un ancho y un color, pero no le asigno un estilo, el borde tampoco se mostrará.
Además de establecer cada una de estas propiedades en un valor que controle los cuatro lados (por defecto), puede especificar cada lado y el valor. por ejemplo, puede asignar un valor diferente a cada lado del borde, como se muestra en el siguiente estilo.
No solo se puede posicionar los elementos de un objeto, sino que además, dicha propiedad en cuestión, se puede desigar para todo el contenido del objeto.
Flexbox.
Flexbox viene de "Flexible Box Layout", que se puede traducir como "Diseño de caja flexible", y nos aporta una magnífica solución para todos nuestros desarrollos responsive. Lo que nos permite es crear un conjunto de elementos flexibles que se adaptan automáticamente a su contenedor y con el que podemos controlar parámetros tales como la alineación, dirección (horizontal/vertical), ajuste de la fila según tamaños y multitud de posibilidades que vamos a presentar en esta practica.
En cuanto a compatibilidad, Flexbox es actualmente compatible con los navegadores web más importantes y diferentes versiones de los mismos, si bien en algunos debemos utilizar prefijos css para su buen funcionamiento.
Hasta ahora hemos visto cuatro modos de acceder al ajuste de contenido con cajas:
● Elementos en línea (display:inline)
● Elementos en bloque (display:block)
● Elementos en tabla (display:table)
● Elementos en posición (position:absolute/relative/fixed).
Con flexbox podremos mejorar nuestra forma de programar ya que esta técnica CSS se basa en la posición absoluta de las cajas respecto al navegador, lo cual hará que se ajusten automáticamente tanto de manera vertical como horizontal. Su funcionamiento se basa en la jerarquía de las cajas respecto a su padre el cual se definirá con la nueva propiedad flex.
Con eso, los controles dentro del padre se redimensionarán ajustandose a la altura del padre.
Veamos un ejemplo básico de flexbox. En el siguiente ejemplo vemos seis hijos que pertenecen a un padre en el cual se asigna una propiedad display:flex. También asignamos un ancho de 25% a cada hijo.
Como puedes observar el contenido se adapta perfectamente a la pantalla teniendo en cuenta la dimensión del navegador ya que no hemos asignado un valor al padre.
Flexbox tiene una serie de propiedades que vamos a ver.
flexbox-direction:Esta propiedad puede tener cuatro valores:
● row: Los elementos se ven de izquierda a derecha.
● reverse: Los elementos se ven invertidos al anterior.
● column: Los elementos se visualizan de arriba a abajo.
● column-reverse: Los elementos se ven de abajo a arriba.
De acuerdo a los anteriores métodos, podemos establecer, por ejemplo el sentido inverso de los hijos.
Como puedes ver en la anterior imagen, se ha cambiado el orden de los hijos, solo asignando la propiedad desde el padre.
Flex-wrap..Esta propiedad indica como se disponen los elementos en línea y por tanto la distribución de los hijos. Existen varias propiedades:
● nowrap: Valor por defecto. En el los elementos se muestran en línea siempre cuando la suma de todos ellos no sea superior al 100% del contenedor padre.
● wrap: Los elementos se distribuyen en línea, pero si los elementos superan al contenedor se muestran en otra línea.
● wrap-reverse: Igual que el anterior pero invertido.
Fijate que con la propiedad wrap, los elementos que tienen 25% de ancho ocupan dos líneas ya que los primeros 4 elementos ya ocupan el 100% de la pantalla y los otros dos elementos se tienen que posicionar en el otra línea.
En la opción por defecto nowrap, los hijos se ajustan al contenido en una sola línea como pasa en la primera imagen (por defecto).
flex-flow.Todo lo anterior se puede establecer mediante la propiedad flex-flow usando la siguiente sintaxis:
flex-flow<flex-direction><flex-wrap>
Existen más propiedades de flexbox que veremos más adelante. Esto te ha servido de introducción para que más adelante puedas crear páginas web adaptadas con tecnología bootstrap, que veremos mas tarde.
