CSS 3 Layout
Impulsamos { talento }
Display
Impulsamos { talento }
Propiedad display
Propiedad display en los elementos HTML:
● display: block; (div, section, header, p, h1,
h2, etc..)
● display: inline; (span, strong, em, b, etc…)
● display: none; (Desaparece del DOM)
● display: inline-block;
(Inline-block: Inline pero se puede ajustar width
y height cómo en un block)
Impulsamos { talento }
Block
Elementos contenedor, como <div>, <section> y
<ul>. O de texto como <p> y
<h1>.
Por defecto (sin establecer un ancho) ocupan
tanto espacio horizontal como
pueden.
Estos elementos rompen el flujo del texto. Se
puede decir que actúan como
un retorno de carro.
Las propiedades width y height hacen efecto.
Impulsamos { talento }
Etiquetas block
address articleaside audio blockquote canvas dd
div dl fieldset figcaption figure footer form h1,
h6 header hgroup hr li main nav noscript ol
outputp pre section table tfoot ul video
Impulsamos { talento }
Inline
El valor predeterminado para elementos como
<span>, <em>, <b>, etc...
Estos elementos dentro de una cadena de texto
no interrumpen el flujo del texto.
Las propiedades width y height no hacen efecto.
Etiquetas inline
b, big, i, small, tt abbr, acronym, cite, code, dfn,
em, kbd, strong, samp, time, var a, bdo, br, img,
map, object, q, script, span, sub, sup button,
input, label, select, textarea.
Impulsamos { talento }
Inline-Block
Un elemento configurado inline-block es muy
similar al inline porque se ajustará en línea con el
flujo natural de texto (en la "línea base"). Sin
embargo puedes establecer un width (ancho) y
un height (altura) para el elemento.
Impulsamos { talento }
Todos los tipos de display:
Impulsamos { talento }
KATA
LevelUp - Interfaces Web
¿Qué es una KATA?
Kata ( 形 , o más tradicionalmente, 型 ) (literalmente: "forma") es una palabra japonesa que describe un conjunto de
movimientos practicados solo o en pareja, que se utilizan en el aprendizaje de las artes marciales japonesas.
Una KATA de código en programación, es un
ejercicio dirigido a que los programadores
desarrollen sus habilidades a base de práctica y
repetición.
Esto ayuda a los desarrolladores a aprender y
mejorar sus habilidades a través, de la práctica y
repetición.
El objetivo de este tipo de aprendizaje es
mejorar, además de preservar y transmitir las
buenas prácticas, y perfeccionarlas.
Impulsamos { talento }
KATA: Display
Con un elemento <span> con color de fondo, vamos a utilizar la propiedad display con block,
inline, inline-block y none para entender cómo funciona cada una.
Además de probar los 4 tipos de display mencionados anteriormente, también tendremos que
asignarle a nuestro <span> un width para ver en qué tipo de display tiene efecto.
Impulsamos { talento }
Position
Impulsamos { talento }
Propiedad position
position: static;
Valor por defecto. Las propiedades top, right, bottom, left, and z-index no tienen efecto
position: relative;
top, right, bottom, left lo mueven desde donde está.
position: absolute;
El elemento no ocupa espacio donde estaba. top, right, bottom, left lo posicionan respecto a su padre
más cercano que está en position: relative. z-index tienen efecto.
position: fixed;
El elemento no ocupa espacio donde estaba. top, right, bottom, left lo posicionan en relación al viewport.
position: sticky;
Se comporta como relative si está dentro del viewport, pero fixed si está fuera del viewport.
Impulsamos { talento }
INVESTIGACIÓN
Impulsamos { talento }
Investigación: Position
Investiga por tu cuenta en qué situaciones podrías utilizar los diferentes casos de la propiedad
Position.
Impulsamos { talento }
Flexbox
Impulsamos { talento }
Flexbox
Que es?
Flexbox es un sistema de elementos flexibles, limpia y personalizable, en la que los elementos se
adaptan y colocan automáticamente.
Para empezar a usar FlexBox solo tenemos que definir flex en la propiedad display del elemento
padre.
Usos
● Centrar verticalmente un bloque dentro de su padre.
● Hacer que todos los elementos de un contenedor tengan la misma altura/anchura,
independientemente de cuanta altura y anchura está disponible.
● Hacer que todas las columnas tengan el mismo tamaño, incluso cuando tiene diferente
cantidad de contenido.
Impulsamos { talento }
Flexbox
flex-direction
flex-direction especifica cómo colocar los objetos en el contenedor definiendo el eje principal y la
dirección (normal o al revés).
Puede tomar 4 valores:
row | row-reverse | column | column-reverse
Impulsamos { talento }
Flexbox
justify-content
Define como el navegador distribuye el espacio entre y alrededor de los items flex, a lo largo del eje
principal de su contenedor.
Sus valores son:
flex-start | flex-end | center | space-between | space-around | space-evenly
Impulsamos { talento }
Flexbox
align-items
Alinea los elementos de la línea flexible actual de la misma forma que justify-content, pero en
dirección perpendicular.
Sus valores son:
flex-start | flex-end | center | stretch | baseline
Impulsamos { talento }
Flexbox
align-self (Se tiene que aplicar a los hijos)
Alinea los elementos hijos reemplazando el valor de align-items de su contenedor padre.
Sus valores son:
auto | flex-start | flex-end | center | baseline | stretch
Impulsamos { talento }
Flexbox
flex
La propiedad CSS flex es una propiedad resumida que indica la capacidad de un elemento flexible
para alterar sus dimensiones y llenar el espacio disponible.
Los elementos flexibles pueden ser estirados para utilizar el espacio disponible proporcional a su
factor de crecimiento flexible o su factor de contracción flexible para evitar desbordamiento.
Impulsamos { talento }
Flexbox
order
La propiedad CSS order especifica el orden utilizado para disponer los elementos en su contenedor
flexible. Los elementos estarán dispuestos en orden ascendente según el valor de order. Los
elementos con el mismo valor de order se dispondrán en el orden en el cual aparecen en el código
fuente.
flex-wrap
La propiedad flex-wrap de CSS especifica si los elementos "hijos" son obligados a permanecer en
una misma línea o pueden fluir en varias líneas.
Sus valores son:
nowrap | wrap | wrap-reverse
Impulsamos { talento }
KATA
Impulsamos { talento }
KATA: Flexbox
Necesitamos tener una estructura base que no modificaremos como la siguiente:
HTML CSS
<div class='padre'> .padre{
<div class='hijo'>Hijo 1</div> background: red;
<div class='hijo'>Hijo 2</div> padding: 10px;
<div class='hijo'>Hijo 3</div> display: flex;
<div class='hijo'>Hijo 4</div> }
</div>
.hijo{
background: white;
}
RESULTADO
Impulsamos { talento }
KATA: Flexbox
Primero probaremos la propiedad flex-direction con todos sus valores:
.padre{
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
}
A continuación vamos a probar la propiedad justify-content con sus distintos valores:
.padre{
display: flex;
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
Impulsamos { talento }
KATA: Flexbox
Para poder entender la propiedad align-items con todos sus valores vamos a asignar un width y un height iguales:
.padre{
display: flex;
width: 200px;
height: 200px;
align-items: flex-start | flex-end | center | stretch | baseline;
}
Ahora vamos a realizar la misma prueba que arriba con cada valor pero con flex-direction: column esta vez:
.padre{
display: flex;
width: 200px;
height: 200px;
flex-direction: column;
align-items: flex-start | flex-end | center | stretch | baseline;
}
Impulsamos { talento }
KATA: Flexbox
La siguiente propiedad es align-self que se tiene que aplicar a los hijos:
.padre{
display: flex;
height: 200px;
align-items: center;
}
/* Seleccionamos el primer elemento .hijo dentro de .padre */
.hijo:nth-child(1){
align-self: flex-start;
}
Impulsamos { talento }
KATA: Flexbox
Con la propiedad flex indicamos cómo se va a dividir el espacio de nuestro padre:
.padre{ .hijo:nth-child(2){
display: flex; flex: 2;
width: 600px; background: blue;
} }
.hijo:nth-child(1){ .hijo:nth-child(3){
flex: 10px; flex: 3;
background: green; background: grey;
} }
.hijo:nth-child(4){
flex: 4;
}
Impulsamos { talento }
KATA: Flexbox
Con la propiedad order indicamos el orden de distribución de los hijos en el elemento padre:
.padre{ .hijo:nth-child(3){
display: flex; order:4;
} }
.hijo:nth-child(1){ .hijo:nth-child(4){
order: 2; order: 3;
} }
.hijo:nth-child(2){
order: 1;
}
Impulsamos { talento }
KATA: Flexbox
La última propiedad es flex-wrap:
.padre{
display: flex;
width: 200px;
flex-wrap: wrap;
}
.hijo{
width: 100px;
}
Impulsamos { talento }
INVESTIGACIÓN
Impulsamos { talento }
Investigación: Flexbox
Investiga por tu cuenta cuales son todas las propiedades que tiene Flexbox y cómo utilizarlas.
Aquí tienes unos enlaces con los que empezar tu investigación:
● CSS Tricks
● FreeCodeCamp
Y unos juegos para interiorizar mejor lo aprendido:
● Flexbox Defense 💣
● Flexbox Froggy 🐸
Impulsamos { talento }
RETO
Impulsamos { talento }
Reto: Replicar Google
Eres capaz de replicar el layout principal del buscador Google?
Claro que sí! Solo necesitas combinar las propiedades de Flexbox que hemos aprendido en la kata
anterior.
Impulsamos { talento }
Grid
Impulsamos { talento }
Grid
¿Qué es un grid?
Una rejilla es un conjunto de líneas horizontales y verticales que se intersectan - un conjunto que
define columnas y el otro filas.
Los elementos se pueden colocar en la rejilla respetando estas líneas de columnas y de filas.
Impulsamos { talento }
Grid
Creamos un contenedor de rejilla al declarar la propiedad display: grid o display: inline-grid en un
elemento.
Todos los hijos directos de ese elemento se convertirán en elementos de la rejilla.
Impulsamos { talento }
Grid: Definiendo columnas y filas
Definimos las filas y columnas de un contenedor grid con las propiedades: grid-template-columns
y grid-template-rows. Estos espacios son llamados vías.
Para definir 2 columnas de 50px cada una: grid-template-columns: 30px 30px;
Para definir 2 filas de 30vw cada una: grid-template-rows: 30vw 30vw;
Impulsamos { talento }
Grid: La unidad fr
Las vías se pueden definir usando cualquier unidad de longitud. Grid también presenta una unidad
de longitud adicional para ayudarnos a crear vías de grid flexibles.
La nueva unidad fr representa una fracción del espacio disponible en el contenedor del grid.
Impulsamos { talento }
Grid: La función repeat()
Rejillas grandes con muchas columns/rows pueden utilizar la notación de la función repeat()
con el fin de repetir todas o una sección de la lista de columns/rows.
Para crear 5 columnas iguales en base al tamaño del contenedor grid:
grid-template-columns: 1fr, 1fr, 1fr, 1fr, 1fr;
grid-template-columns: repeat(5, 1fr); Mismo resultado, mejor código!
Impulsamos { talento }
Grid: Uso avanzado de repeat
Que utilicemos la función repeat() no significa que no podamos asignar tamaños específicos a una
vía en concreto, por ejemplo:
Para crear 3 columnas de 1fr y la primera y la última de 2fr:
grid-template-columns: 2fr repeat(3, 1fr) 2fr;
O para crear 2 series de columnas con 1fr, 2fr, y 3fr:
grid-template-columns: 1fr 2fr 3fr 1fr 2fr 3fr;
grid-template-columns: repeat(2, 1fr 2fr 3fr); Mismo resultado, mejor código!
Impulsamos { talento }
Grid: Tamaño de vía y función minmax()
Al configurar un grid es posible que se desee dar a las vías un tamaño mínimo, pero asegúrese de
que se expandan para adaptarse a cualquier contenido que se pueda agregar.
Con minmax() se puede definir un tamaño mínimo y otro máximo para poder adaptarse a diseños
responsive.
grid-template-rows: minmax(100px, auto);
Impulsamos { talento }
Grid: Espacio entre filas y columnas
La propiedad CSS grid-gap es una propiedad abreviada para grid-row-gap y grid-column-gap
que especifica el espacio entre las filas y las columnas de la cuadrícula.
grid-gap: 20px;
Es lo mismo que:
grid-row-gap: 20px;
grid-column-gap: 20px;
Impulsamos { talento }
KATA
Impulsamos { talento }
KATA: Grid
Necesitamos tener una estructura base que no modificaremos como la siguiente:
HTML CSS
.containerGrid{
<div class="containerGrid"> background: red;
<div>Uno</div> padding: 5px;
<div>Dos</div> width: 300px;
display: grid;
<div>Tres</div>
grid-template-columns: 1fr 1fr;
<div>Cuatro</div>
}
<div>Cinco</div>
<div>Seis</div> .containerGrid > div{
</div> background: white;
text-align: center;
RESULTADO }
Impulsamos { talento }
KATA: Grid
Vamos a convertir nuestro grid básico en un grid de 3x3 definiendo el tamaño de sus vías:
.containerGrid{
display: grid;
grid-template-columns: 150px 150px;
grid-template-rows: 40px 40px 40px;
}
A continuación vamos a crear un grid de 3x2 pero utilizando la unidad fr:
.containerGrid{
display: grid;
grid-template-columns: 1fr 2fr 3fr;
grid-template-rows: 1fr 2fr;
}
Impulsamos { talento }
KATA: Grid
Ahora vamos a crear un 3x2 pero utilizando la función repeat():
.containerGrid{
display: grid;
grid-template-columns: repeat(3, 1fr);
}
A continuación vamos a modificar el tamaño de las rows con la función repeat():
.containerGrid{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr 2fr 3fr);
}
Impulsamos { talento }
KATA: Grid
Y si queremos un grid 3x2 responsive con 20px de separación entre columnas y rows?
Primero tendríamos que eliminar el width de nuestro .containerGrid para que se adapte hasta un
tamaño mínimo:
.containerGrid{
display: grid;
grid-template-columns: repeat(2, minmax(100px, auto));
grid-gap: 20px;
}
Impulsamos { talento }
INVESTIGACIÓN
Impulsamos { talento }
Investigación
Te hemos enseñado las propiedades más utilizadas de Grid. Ahora es momento de investigar por
tu cuenta cuales son todas las propiedades que tiene Grid y cómo utilizarlas.
Aquí tienes unos enlaces con los que empezar tu investigación:
● CSS Tricks
● Learn CSS Grid
Y unos juegos para interiorizar mejor lo aprendido:
● Grid Garden 🥕
● Grid Critters 👽
Impulsamos { talento }
RETO
Impulsamos { talento }
Reto: Replicar Google
Eres capaz de replicar el layout principal del buscador Google pero esta vez con Grid para ver las
diferencias frente a Flexbox?
Claro que sí! Solo necesitas combinar las propiedades que hemos aprendido en la kata anterior.