Alineamiento en los elementos hijos + Quiz

La respuesta al quiz es: C

place-self: center stretch

Sería la C porque, según lo visto, primero es align (vertical) y luego justify(horizontal), por tanto, place-self: center stretch lo que estaría haciendo es, alinear de manera vertical en el centro y de manera horizontal se alinea con un tipo ``stretch` que es básicamente estirarse todo lo que se pueda 🤔.

Empecé a agregar cosas hasta que se me fue de las manos pero me gusto, vamos a ver si logro hacerlo.

😄

Respuesta al quiz es C; por deducción, es la única respuesta que contiene los dos atributos necesarios para funcionar: justify y align.

@media (prefers-color-scheme: dark) { /* Styles according the dark mode */ }

este media les ayudará a estilizar su página web en modo oscuro.

Respuesta: C.
Alineado al centro verticalmente y estirado para que ocupe todo horizontalmente

Si queremos manipular desde los items podemos hacer uso de las propiedades parecidas a las que vimos como: Justify-Align-Place pero en este caso no serán Item o Content, si no SELF.

Justify-Self: MISMAS PROPIEDADES QUE LOS ITEM O SELF

Una Pseudo clase que nos ayuda a utilizar un elemento o elementos en especifico y no llenarnos de mas clases diferentes, podemos utilizar la:

.item:nth-child(1){ }

Aquí lo que decimos es que podemos utilizar el primer elemento que contenga la clase item.

Si queremos utilizar todos y solo excluir a uno, podemos a usar:

.item:not(:nth-child(1)){}

Donde especificamos que usaremos todos los elementos de la clase EXCEPTO el primero.

La respuesta correcta es la C Para los que no sepan que es stretch dejo la documentación abajo:
stretch
Los elementos flexibles son estirados de modo que el tamaño transversal de sus límites sea el mismo de la línea, manteniendo sus restricciones de anchura y altura.

Básicamente nos dice que estira el elemento para que ocupe el 100% de su contenedor respetando su propio ancho y alto máximo y mínimo, en este caso ya que usamos el stretch para el valor justify que está en el eje X ocupa todo el ancho.

La respuesta del quiz es la opción C: place-self establece tanto align-self y justify-self. align-self toma el valor de center, así que el elemento es alineado al centro de forma vertical, y justify-self toma el valor de stretch por lo que el elemento ocupa todo el ancho de la celda.

No lo entendí a la primera, pero siempre tengo en cuenta las pseudoclases y pseudoelementos, es algo que tengo que ver y repasar.
Por suerte lo entendí, y ya que me la pasaba usando clases con nombres específicos para cada elemento, y no sabia como utilizar pseudoclases con “heredados” me va a ayudar bastante en las prácticas.
Los justify y align los aprendi bastante bien en los cursos anteriores y además con los juegos que había en los comentarios sobre flex.

Dejo los links de los juegos, les puede servir de repaso.
https://mastery.games/flexboxzombies/
https://codepip.com/games/flexbox-froggy/

la C

Si, la respuesta es la C

C

El shortcut sería “place-self” ya que es la abreviación para “justify-self” (horizontal) y “align-self” (vertical): entonces va “center” + “stretch” (estirar hasta el límite) :3

La C .!

La respuesta es: C

place-self: center stretch;

C

La respuesta al quiz sería C, ya que la primera propiedad de place-self representa align-self (que está centrada) y la segunda justify-self (que está estirada)

Opción “C”

place-self: center stretch;

La respuesta seria la C

place-self: center stretch

Según lo que yo hice, la respuesta es la “C”.

Respuesta C:

place-self: center stretch;

The answer to the quiz is : C
place-items: end center;

C

La primera propiedad reemplaza a align-self. Align-self mueve el contenedor en el eje vertical asi que por eso queda centrado.

Stretch lo que hace es estirar el contenido en todo el espacio disponible, en este caso de manera horizontal

La respuesta al quiz es la C, ya que si solo utilizamos place-self: center, este solo nos ubicara el contenido en el centro pero no abarcara todo el ancho del contenedor, y si usamos solo stretch este absolutamente toda el area del contenedor.

Claramente es la C

Opción C es la tareita xD:
place-self: center stretch;

La respuesta es la C

place-self: center stretch;

Centra de manera vertical y estira de manera horizontal:

Pienso que es la opcion C, con el primero ‘center’ decimos que queremos el elemento centrado en el axis vertical, y con stretch que tome como el espacio disponible en el axis horizontal.

ES EL C

. . .

La respuesta al quiz es C

El Quiz = C

Place-self: center stretch;

La respuesta al quiz es:

place-self: center stretch; 

Quien lo diria…

Respuesta: C
place-self: center stretch;

La respuesta al quiz: es la C.
Porque se puede alinear al centro verticalmente y con el stretch, estirarlo para que ocupe todo el espacio horizontalmente

La respuesta es la C, debido a que strech hace que se llene su volumen a lo largo del eje trasversal, en este caso el eje horizontal.

La respuesta al quiz es: C

c

body{
margin: 0;
}
.container{
background: papayawhip;
height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: repeat(2, 1fr);

}
.item_one{
background: blueviolet;
place-self: center stretch;
}
.item{
background: cadetblue;
}

Uy que buena esa regla del not, not la tenia, jaja, tomando nota

La respuesta es C

Quiz:
La respuesta es la opción C

Resumen:

• Si queremos manipular desde los items podemos hacer uso de las propiedades parecidas a las que vimos como: Justify-Align-Place pero en este caso no serán Item o Content, si no SELF. Estos se coloca en los ITEMS que queremos alinear.

1. justify-self: // Permite alineas elemento de forma horizontal

.container {
	  background: papayawhip;
	  display: grid;
	  grid-template-columns: repeat(2, 1fr);
	  width: 60px;
	}
	
	.item:nth-child(1){ 
	  background: hotpink;
	  justify-self: start; // Indico al elemento que se ubique al comienzo de la grid
	}

• Una Pseudo clase que nos ayuda a utilizar un elemento o elementos en especifico y no llenarnos de mas clases diferentes, podemos utilizar:

	.item:nth-child(1){ } //Aquí lo que decimos es que podemos utilizar el primer elemento que contenga la clase item.

• O tambien:

	.item:not(:nth-child(1)){} // Donde especificamos que usaremos todos los elementos de la clase EXCEPTO el primero.

1. aling-self: // Permite alineas elemento de forma vertical

	.container {
	  background: papayawhip;
	  display: grid;
	  grid-template-columns: repeat(2, 1fr);
	  width: 60px;
	  height: 60px; // Es importante definir un alto de la GRID sino no se alineara verticalmente
	}
	
	.item:nth-child(1){ 
	  background: hotpink;
	  aling-self: start; // Indico al elemento que se ubique al comienzo de la GRID
	}

1. place-self: aling-self / justify-self // Shorthand para definir las 2 anteriores.

.item:nth-child(1){ 
	  background: hotpink;
	  place-self: center stretch; // Primero indico en aling-self y luego al justify-self 
	}

La respuesta al quiz es C

C

La respuesta al quiz es la C 😊🌎✌

Place-self: center stretch ← C

C

Es: c

place-self: center stretch

Respuesta a las Quiz es la C

De acuerdo a la siguiente imagen, la respuesta es C

La respuesta es la C.

La respuesta sería la opción «C».

La respuesta es la C, ya que Place-self primero toma el valor vertical y luego el valor horizontal, que en este caso seria… place-self: center stretch;

La respuesta a este Quiz es la letra: C.
La propiedad place-self es un shorthand, es decir un atajo para la alineación en linea y en bloque.
El primero valor es precisamente para la alineación en linea, seguido de un / y la alineación de bloque.

Por lo que…

• center: Alinea de forma centrada al item en la dirección de linea (Vertical).
• stretch: Trata de estirar al item en la dirección de bloque (Horizaontal).

Interesante el poder usar la propiedad de justify-self en el item para lograr el primer diseño.
Dejo el código por si desean verlo: https://codepen.io/ijcode1/pen/bGqZeZL

La respuesta creo que la respuesta seria la C.

Para mi la C

La respuesta es: C

La respuesta es la C

Quiz = C

La respuesta es C

place-self: center stretch;

La respuesta es: C

La respuesta es la C, porque la propiedad nos dice que alinea de forma vertical / horizontal. Entonces center para vertical y stretch para horizontal que ajusta el tamaño del item a todo el espacio disponible.

🤓
Me gustó mucho el uso de pseudoclases para acortar código y cómo utiliza la negación not (con la pseudoclase entre paréntesis) para referirse al resto de elementos.

La respuesta al Quiz es la C:

Porque con la propiedad de place-self: podemos incluir tanto align como justify, entonces align sería center ya que en el block-axis está alineado en el centro y el justify sería stretch que sería que se expande hasta donde puede.

La respuesta es la c, el eje align-self es centrado y luego en el eje justify-self es estirado como viene en predeterminado.

Excelente curso,me gusta estos cursos donde se explican teoricamente los conceptos y fundamentos y luego pasamos a un curso totalmente practico donde aplicamos esos conceptos.

La opción: C

La respuesta correcta es: C

Respuesta Quiz
place-self: center stretch;

Si se les complica acordarse entre align y justify puede aplicar la ABC
Align
Block
Column
Y ya te acuerdas perfecto de que direccion es

La respuesta del quiz es la C

D

place-self: center stretch;

La respuesta es C

La respuesta es la c

Mi respuesta al CUISSSS es la opción C 😄
.
El orden de la sintaxis de place-self, sería: <align-self> <justify-self>?
Recordemos que place-self es shorthand para estas dos últimas propiedades.
El signo de interrogación en la sintaxis quiere decir que ese valor es opcional, esto en caso de que no asignemos un segundo valor, el primer valor será usado tanto para align-self como para justify-self.

.item1 {
  grid-area: card1;
  place-self: center stretch;
}