CSS - Flexbox & Grid

Question 1

Formas de construir Layouts (3)

Answer 1

Floats, Flexbox, Grid

Question 2

Que hace box-sizing: “border-box”?

Answer 2

Sumas los px del padding, borde, y espacio del contenido, en ambos ejes, para obtener un nuevo ancho y alto

Question 3

Que le sucederia a un elemento con estas propiedades, al aplicarsele border-box? (pensar en el nuevo ancho total)
- width: 300px
- padding: 40px

Answer 3

Border-box hace que el elemento pase de tener 40px + 300px + 40px, a tener un ancho de 40px + 220px + 40px, rediciendo el espacio del contenido para que coincida con los 300px de ancho

Question 4

Que es Flexbox y como distrubuye el espacio entre los elementos?

Answer 4

Propiedad de CSS para crear layouts de una dimension, ya sea vertical u horizontal. Divide automaticamente el espacio del contenedor padre entre todos sus hijos

Question 5

Que hace flex-wrap?

Answer 5

Hace que los elementos den un “salto de linea” en caso no quepan en el viewport

Question 6

Que hace flex-grow?

Answer 6

Define que tanto espacio disponible de un contenedor, puede tomar un item para crecer

Question 7

Que hacen estas propiedades?
- flex-grow: 1 en cada elemento hijo
- flex-grow: 2 en un solo elemento hijo

Answer 7

• flex-grow: 1 hara que cada item tome equitativamente el espacio disponible
• flex-grow: 2 hara que ese item tome el doble de espacio que los otros items, o que crezca el doble de rapido que los demas items

Question 8

Que hace flex-shrink?

Answer 8

Define que tan rapido puede encogerse un item

Question 9

Que hace flex-basis?

Answer 9

Define un tamanio recomendado para el elemento

Question 10

Que pasaria con los items con estas propiedades?
- flex-shrink: 1
- flex-basis: 200px

Answer 10

Buscaria que los items tengan un espacio de 200px, pero en caso de que estos no quepan, se encogerian equitativamente