WorksheetsQuestionário CSS Grid Layout, Flexbox, MediaQueries
Total questions: 25
Worksheet time: 13mins
O que define uma 'grid container' em CSS Grid?
display: block;
display: flex;
display: grid;
display: inline-block;
Qual propriedade é usada para definir o número de colunas em uma grid?
grid-template-columns
grid-columns
grid-column-count
columns
Como você define o espaçamento entre os itens da grid?
a) grid-spacing
b) grid-gap
c) grid-item-space
d) item-gap
Qual valor da propriedade grid-template-rows cria três linhas de alturas diferentes: 100px, auto e 1fr?
grid-template-rows: 100px auto 1fr;
grid-template-rows: 100px, auto, 1fr;
grid-template-rows: 100px 1fr auto;
grid-template-rows: 1fr auto 100px;
Como você faz um item ocupar duas colunas na grade?
grid-column: span 2;
grid-column-start: 2;
grid-span: 2;
grid-columns: 2;
Qual das seguintes propriedades pode ser usada para centralizar um item dentro de uma célula da grid?
justify-self
align-self
place-self
Todas as anteriores
Qual propriedade define o contêiner flexível em Flexbox?
display: block;
display: flex;
display: grid;
display: inline-block;
Qual propriedade define a direção dos itens flexíveis?
flex-direction
flex-wrap
flex-flow
flex-order
Como você alinha itens ao longo do eixo principal em Flexbox?
align-items
justify-content
align-content
align-content
Qual propriedade é usada para definir o número de linhas em uma grid?
grid-template-rows
grid-rows
grid-row-count
rows
Como você define a área de um item na grid?
grid-area
grid-zone
grid-region
grid-space
Qual propriedade é usada para alinhar itens ao longo do eixo transversal em Flexbox?
align-items
justify-content
align-content
align-self
Como você faz um item flexível crescer para ocupar o espaço disponível?
flex-grow: 0;
flex-grow: 1;
flex-grow: 2;
flex-grow: auto;
Qual propriedade permite que os itens flexíveis se distribuam em várias linhas?
flex-wrap
flex-basis
flex-direction
flex-flow
Qual propriedade é um atalho para flex-direction e flex-wrap?
flex-flow
flex
flex-basis
flex-start
Qual propriedade define a base flexível de um item antes de qualquer espaço adicional ser distribuído?
flex-basis
flex-grow
flex-shrink
flex-start
Qual a finalidade das Media Queries no CSS?
Definir estilos específicos para diferentes navegadores
Aplicar estilos específicos com base em condições do dispositivo
Carregar scripts adicionais
Nenhuma das anteriores
Qual das seguintes é uma Media Query válida para aplicar estilos em "telas" com largura mínima de 768px?
@media screen and (min-width: 768px)
@media (max-width: 768px)
@media screen and (max-width: 768px)
@media (min-width: 768px)
Como você define uma Media Query para aplicar estilos em telas com resolução mínima de 2dppx?
@media (resolution: 2dppx)
@media (min-resolution: 2dppx)
@media (max-resolution: 2dppx)
@media screen and (min-resolution: 2dppx)
Qual Media Query aplicaria estilos apenas em dispositivos impressos?
@media print
@media screen
media (print-only)
@media (print-mode)
Como você define uma Media Query para aplicar estilos em dispositivos com largura máxima de 480px?
@media screen and (max-width: 480px)
@media (min-width: 480px)
@media screen and (min-width: 480px)
@media (max-width: 480px)
Qual Media Query é usada para detectar dispositivos em modo retrato?
@media screen and (orientation: portrait)
@media screen and (orientation: landscape)
@media (max-width: portrait)
@media (min-width: portrait)
Como você define uma Media Query para aplicar estilos em telas com altura mínima de 1024px?
@media screen and (min-height: 1024px)
@media (max-height: 1024px)
@media screen and (max-height: 1024px)
@media (min-height: 1024px)
Como você pode combinar múltiplas condições em uma Media Query?
@media screen and (min-width: 600px) or (orientation: landscape)
@media screen and (min-width: 600px) and (orientation: landscape)
@media screen, (min-width: 600px) and (orientation: landscape)
@media screen and (min-width: 600px), (orientation: landscape)
Qual propriedade é usada para definir o espaçamento entre as linhas da grid?
row-gap
grid-row-gap
line-gap
grid-line-gap
