Propiedades de los estilos CSS.

​Descripción de las propiedades de los estilos CSS

By Osvaldo González

Multiple Choice

¿Cuál es la principal ventaja de utilizar Flexible Box Layout (Flexbox) en comparación con los métodos de diseño tradicionales basados en float?

• Permite la alineación y distribución eficiente del espacio entre elementos en un solo eje (fila o columna).

• Es el único método que asegura que el diseño se vea idéntico en todos los navegadores.

• Permite definir el ancho y alto de todas las celdas automáticamente, sin usar unidades relativas.

• Permite crear estructuras bidimensionales complejas (filas y columnas simultáneamente).

Multiple Choice

En CSS Grid Layout,
¿qué propiedad se utiliza en el contenedor padre para definir explícitamente el tamaño de las columnas de la cuadrícula?

• justify-items

• grid-template-rows

• grid-template-columns

• grid-auto-flow

Multiple Choice

¿Cuál es la sintaxis correcta para declarar un contenedor Flex y definir la dirección de sus elementos como una columna (vertical)?

• display: grid; grid-auto-flow: column;

• display: block; direction: column;

• display: flex; flex-direction: vertical;

• display: flex; flex-direction: column;

Multiple Choice

¿Qué valor de la propiedad align-items centra los elementos de un contenedor Flex a lo largo del eje transversal (perpendicular al flex-direction)?

• stretch

• center

• flex-start

• justify-content

Multiple Choice

En CSS Grid Layout,

¿qué unidad de medida es relativa al espacio libre disponible en el contenedor Grid, y es comúnmente usada para crear diseños flexibles?

• fr

• vw

• rem

• %

Multiple Choice

En Flexbox,
¿qué propiedad de los ítems hijo permite que crezcan y ocupen el espacio disponible, tomando un valor numérico como argumento?

• flex-shrink

• align-self

• flex-grow

• flex-basis

Multiple Choice

Para un elemento Grid,
¿qué propiedad se utiliza para que ese elemento ocupe 3 columnas de la cuadrícula, comenzando en la línea 2?

• grid-area: 2 / 3;

• grid-column: 2 / span 3;

• grid-column: span 3 / 2;

• grid-row: 2 / span 3;

Multiple Choice

¿Cuál es el valor predeterminado (por defecto) de la propiedad flex-wrap en un contenedor Flexbox?

• nowrap-flex

• wrap

• wrap-reverse

• no-wrap

Preguntas con HTML.

Multiple Choice

Observa el siguiente código CSS.

¿Qué efecto tendrá la propiedad justify-content: space-between; en los ítems de este contenedor Flexbox?

• El espacio libre se distribuirá uniformemente entre los ítems, con el primer ítem al inicio y el último al final del contenedor.

• Los ítems se apilarán verticalmente, iniciando desde arriba.

• Los ítems se centrarán en el eje principal del contenedor.

• Se dejará el mismo espacio vacío antes del primer ítem, entre todos los ítems y después del último ítem.

Multiple Choice

Observa el siguiente código HTML y CSS.
¿Cómo aparecerán los ítems 1, 2 y 3 en la pantalla?

• En una sola fila horizontal, con espacio igual entre ellos.

• Apilados verticalmente y alineados al borde derecho del contenedor.

• Apilados verticalmente, centrados horizontalmente, uno debajo del otro.

• Apilados horizontalmente y centrados verticalmente.

Multiple Choice

Observa el siguiente CSS aplicado al ítem de un contenedor Flexbox. ¿Cuál es el significado de esta declaración?

• Esta es una sintaxis incorrecta para la propiedad flex y no tendrá ningún efecto.

• El ítem no crecerá, no encogerá y tendrá un tamaño base fijo de 100px.

• El ítem crecerá para ocupar 1/100 del espacio libre, pero no encogerá.

• El ítem crecerá y encogerá de manera flexible, con un tamaño base de 100px.

Multiple Choice

En un contenedor Grid con 4 columnas,
¿qué código de ítem Grid permite que ese ítem comience en la segunda línea de columna y abarque (span) las tres columnas restantes?

• grid-column: 2 / span 4;

• grid-row: 2 / 5;

• grid-column: span 3;

• grid-column: 2 / 5;

Un poco de teoría.

Multiple Choice

¿Cuál es la diferencia crítica en el comportamiento de los ítems en el Eje Principal cuando se usa:

justify-content: space-around; frente a justify-content: space-evenly;

en Flexbox?

• space-around asegura que el espacio entre los ítems sea el doble que el espacio en los extremos;

  space-evenly hace que todo el espacio sea igual.

• space-evenly solo funciona si flex-direction es column, mientras que

  space-around funciona con row.

• space-around requiere la propiedad flex-wrap: wrap;, mientras que

  space-evenly no.

• space-around solo se aplica a los ítems, mientras que

  space-evenly incluye el espacio del padding del contenedor.

Multiple Choice

Para un elemento que necesita ser colocado con precisión por Grid, pero cuyo contenido interno debe estar perfectamente centrado vertical y horizontalmente sin usar márgenes automáticos,

¿qué combinación de propiedades de display y alineación son las más eficientes?

• Contenedor Padre: display: flex;.

  Ítem Hijo:

  display: grid; place-content: center;.

• Contenedor Padre: display: grid;.

  Ítem Hijo:

  justify-self: center; align-self: center;.

• Contenedor Padre: display: grid;.

  Ítem Hijo:

  display: flex; justify-content: center; align-items: center;.

• Contenedor Padre: display: grid;.

  Ítem Hijo:

  display: block; margin: auto;.

Multiple Choice

Si se utiliza la propiedad order: -1; para mover visualmente el último ítem de una lista Flexbox al inicio,

¿cuál es la implicación principal para la accesibilidad (lectores de pantalla)?

• La propiedad order es obsoleta y no afectará ni la visualización ni el DOM (Document Object Model).

• El orden de lectura (por el DOM) no cambia; el lector de pantalla leerá la lista en el orden original del HTML, causando potencial confusión.

• El orden de lectura y el orden visual coincidirán perfectamente.

• El ítem se moverá al inicio del DOM (Document Object Model), mejorando la coherencia de lectura.

Multiple Choice

Si se define un grid-template-rows de solo dos filas (100px y auto), pero se insertan cinco ítems en el HTML, ¿qué propiedad define el tamaño que tomarán automáticamente las tres filas adicionales creadas por el Grid?

• Utilizarán el valor auto por defecto, sin necesidad de otra propiedad.

• grid-auto-flow

• grid-template-rows

• grid-auto-rows

Multiple Choice

¿Cuál es la principal ventaja de usar la unidad fr (fracción) sobre el % (porcentaje) para definir el ancho de las columnas en CSS Grid?

• La unidad fr distribuye el espacio libre restante, mientras que el % calcula el ancho basado en el ancho total del contenedor.

• La unidad % es obsoleta y se reemplaza completamente por fr en Grid Layout.

• fr solo se puede usar si todas las columnas tienen el mismo ancho.

• El porcentaje es relativo al tamaño de fuente, mientras que fr es relativo al contenedor.

Multiple Choice

Para un ítem Flex, si se declaran simultáneamente flex-basis: 150px; y width: 100px;,

¿qué valor predominará como tamaño inicial del ítem antes de la distribución del espacio libre?

• El valor flex-basis se ignora a menos que flex-grow sea mayor que 0.

• Predomina el valor de width (100px), ya que siempre tiene prioridad sobre flex-basis.

• 
  Predomina el valor de flex-basis (150px), ya que toma precedencia sobre la propiedad width.

• El ítem tomará el promedio de ambos valores: 125px.

Gracias por Jugar.