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 🤔.
Lleva tus conocimientos de CSS a otro nivel
Tips para llevar tu conocimiento de CSS a otro nivel + Quices
¿De dónde venimos y en dónde estamos?
¿Cómo fue pensado CSS cuando se creó?
Limitaciones de CSS y el problema de los elementos flotantes
Herramientas que nos han facilitado el camino
¿Cómo se llegó al concepto de CSS Grid?
¿CSS Grid es una idea nueva? La evolución de la especificación
¿Qué significa Grid para CSS?
Control de alineamiento
Técnicas de alineamiento antes de CSS Grid: margin y line-height
Técnicas de alineamiento antes de CSS Grid: table-cell y positions
Técnicas de alineamiento antes de CSS Grid: pros y contras
Modos de escritura y ejes de alineamiento + Reto
Propiedades físicas y lógicas en CSS + Quiz
Técnicas de alineamiento con Flexbox
Dibujemos con CSS + Reto
Conceptos generales para comenzar a trabajar con CSS Grid
Grid y las relaciones padre e hijos inmediatos + Quíz
Lines, tracks, cell, area, gutters, grid axis, grid row, grid column + Reto
¡Iniciemos nuestro proyecto! Fase de creatividad e identificación de elementos
Propiedades y valores para el elemento padre
Creando nuestro contenedor: ¿display: grid o display: inline-grid?
Creando filas, columnas y espaciado + Reto
Alineamiento en el elemento contenedor + Quiz
Generación automática de tracks + Quíz
Funciones: repeat(), minmax() y fit-content()
Propiedades y valores para los elementos hijos
¡Manos al código! Fase de construcción de la grid principal de nuestro proyecto
Ubicación + Reto
Alineamiento en los elementos hijos + Quiz
¡Manos al código! Fase de ubicación y alineamiento
Continuando con la fase de ubicación y alineamiento
Lo que podemos lograr adicionalmente con CSS Grid
Responsive y CSS Grid
Continúa con el Curso de Diseño Web con CSS Grid y Flexbox
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Iniciar sesión
Alineamiento en los elementos hijos + Quiz
24/28Recursos
Aportes 102
Preguntas 3
Ordenar por:
La respuesta al quiz es: C
place-self: center stretch
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.
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.
La respuesta al quiz es: C
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.
Para ‘justify’ que utiliza el ‘inline-axis’, el width (ancho) del elemento debe estar definido. Para ‘align’ que utiliza el ‘block-axis’, el height (alto) del elemento debe estar definido.
De lo contrario los elementos no toman las propiedades, por no tener un espacio para determinar el punto de inicio y final.
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
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;
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.
La respuesta correcta es la C
Esta es la que yo e usado
.contenedor{
background: papayawhip;
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 300px;
height: 180px;
}
.item:nth-child(1){
background-color: hotpink;
place-self: center stretch;
height: 40px;
}
.item:not(:nth-child(1)){
background-color: turquoise;
}
La respuesta es la C
Quíz:
La respuesta es la
>C
Repuesta es “C”
La respuesta es C :
place-self: center stretch;
La respuesta del Quiz seria la C
Quiz!
place-self: center stretch
Centramos verticalmente y usamos stretch(valor por defecto) para usar todo el espacio disponible horizontalmente.
.item:nth-child(1) {
background: hotpink;
place-self: center stretch;
}
``` Seria el C
place-self Quíz : )
.container{
background : papayawhip;
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 60px;
height: 60px;
}
.item:nth-child(1){
background: hotpink;
place-self: center stretch;
}
.item:not(:nth-child(1)){
background: turquoise;
}
la c!!!
place-self: center stretch;
La respuesta es la C place-self: center stretch; porque se está alineando en el centro en bloque seguido de stretch en línea.
Respuesta: C
Justify-self
Align Self
Place Self es una abreviacion de:
place-self Quíz:
La respuesta es la C:
place-seflt: center stretch;
La C
place-self: center stretch;
.item:nth-child(1) {
background: hotpink;
place-self: center stretch;
}
La respuesta al quiz es: C
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.
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.
- 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.
- 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
}
- 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
La respuesta al quiz es la C 😊🌎✌
Place-self: center stretch ← 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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.