Fichas
Flexbox - CodeSchool
Fichas del conjunto (15)
- 1O que é flexbox?É uma coleção de propriedades de CSS que nos permite alinhar conteúdo e distribuir espaço.
É um value para diplay;
já vimos que existe, display: block, inline-block, inline... e flex;
ao definir o display: flex; poderemos contar com outras propriedades para nos ajudar a posicionar melhor os elementos inseridos da flexbox, como :
Flex containers, flex items, flex lines - 2Por padrão como funciona o alinhamento dos elementos filhos de um flex container? (elemento que possui a display: flex)todos são alinhados de forma horizontal, o alinhamento dos elementos filhos é controlado por propriedades no elemento pai.
Por padrão nossa display: flex container será um elemento block-level, isso é, ele tomará 100% do espaço do elemento pai.
Podemos criar também um elemento display: inline-flex; então o que vamos ter é um elemento que ajusta seu tamanho ao conteúdo. - 3Como são chamados os filhos de um flex container? (elemento com a propriedade display: flex; )São chamados de flex items, que são todos os elementos que estão inseridos no flex containers, sendo elementos HTML ou text.
Esses items são ajustados horizontalmente, então vamos ter dentro do container:
ELEMENT 1 / ELEMENT 2 / ELEMENT 3
o flex box utiliza seu proprio algoritmo para distribuir o espaço para cada elemento. - 4o que a prorpeidade flex-wrap faz?A propriedade define como serão dividido os elementos, o valor padrão é nowrap, que significa que os elementos dividiram espaço em uma mesma linha. - sempre -
se mudarmos o value para wrap, elementos que não cabem na mesma linha, serão posicionados em uma nova linha.
se mudarmos o value para wrap-reverse, os elementos que não cabem serão posicionado em uma nova linha, porém na ordem contrária. - 5Como funciona a propriedade flex-direction?Ela define como o flex-parrent vai posicionar os elementos, se será horizontalmente, horizontalmente reverso, ou verticalmente ou verticalmente reverso.
Valor padrão é row, podendo adicionar row-reverse, column, column-reverse. - 6Como podemos criar uma page com o footer grudado em baixo da nossa screeen independente do conteúdo?temos :
então fazemos o nosso body um flex-container (display: flex;) e mudamos o flex-direction para column.
então vamos mudar nosso html,body,main {
100%
}
dessa forma obtemos um footer grudado em baixo independente do conteúdo. - 7Como os flex-items são distruibuidos?Por flex-axis, a main axis, que são determinados pela propriedade flex-direction
com flex-direction: row;
vamos ter uma linha horizontal, onde inicia-se pela esquerda, passa-se pelo ponto central e finaliza-se a direita.
se alterarmos para colum, a nossa main-axis vai para inicio em cima, final em baixo. - 8Qual propriedade é usada para distribuir espaço na 'main-axis'?justify-content: flex-start;
(default)
ele aceita:
flex-start | flex-end | center | space-between | space-around
então pensando em nossa linha - MAIN AXIS - flex-start é da esquerda para direita, onde caber os items (comportamento padrão), flex padrão é colocar os items da direita para esquerda. Space-between, distribui igualmente espaço entre os flex items.
space-around - vai pegar todo o espaço disponível na linha e distribuir para cada elemento flex item.
center - centraliza o conteúdo sem espaçamento entre eles, somente entre as bordas. - 9Como fazemos para mudar a ordem dos elementos flex-items?Utilizamos a propriedade order: ;
o padrão é 0;
aceitando números positivos e negativos, como todos os elementos tem order: 0; eles são mostrados na ordem do arquivo origem.
assinalando um flex-item com order: -1;
fazemos com que esse elemento seja mostrado depois de todos os flex-items do flex-container.
se for 1 ele irá ser mostrado antes de todos os flex-items em questão. - 10Como fazemos para distribuir espaços na linha cross-axis - que é perpendicular a main-axis ?na direção linha, a cross axis é vertical, na direção column ela é horizontal.
utilizamos
align-items , default value: stretch, aceita também flex-start | flex-end | center | baseline
que funcionam com a mesma logica da propriedade justify content. - 11Qual comando flex-box utilizamos para controlar o tamanho de nossos flex-items?Primeiramente para que nossos elementos possam ser mostrados em 'small screens' devemos alterar uma propriedade padrão do google chorme:
Adicionando a inputs, min-width: 0;
flex-grow property é utilizada para especificar o raio do espaço que um elemento pode utilizar na main-axis, aceita varios numeros e seu padrõa é 0, onde 0 é igual a 'não cresça' - que seria os elementos do tamanho do conteúdo deles.
flex-grow: 1; vai fazer com que os elementos ocupem todo o espaço disponível na main-axis - que seria o espaço disponível do elemento pai, -
aplicamos flex-grow: em nossos flex items.
se queremos que dois elementos sejam de um tamanho e outro seja 2 vezes maior, vamos declarar:
.element1,
.element2, {
flex-grow: 1;
}
.element3 {
flex-grow: 2;
} - 12Como utilizamos a propriedade 'flex-shrink'?A propriedade 'flex-shrink' é utilizada para especificar o 'shrink factor' de um flex item, aceitando varias unidades sendo 1 seu padrão.
onde zero, deixa o flex-item estatico, sem alteração de tamanho, os unicos que se modificam são os outros flex-items; - 13Como funciona a propriedade flex-basis?Usada para especificar o tamanho inicial de um flex-item. Seu value padrão é 'auto' e suporta unidades CSS com: %, px, em, rem etc...
caso o tamanho disponível seja menor que o definido, ele muda os outros flex-items para outras linhas.
flex-basis em numeros absolutos, como definir um como 250px, ele só vai ter 250px, não ira crescer mais que isso, caso optemos por utilizar numero relativos, vamos ter maior mobilidade do tamanho dos elementos. - 14Qual propriedade utilizamos para alinhar um flex-item, sobre escrevendo as propriedades do flex-container?align-items - Não controla elementos wrap, O valor padrão é stretch, mas aceita flex-start, flex-end, center, baseline
align-items scretch, envia o tamanho para ter o mesmo que o container.
align-container, controla elementos wrap, o valor padrão e valores possíveis são iguais ao align-items. - 15Como funciona a 'flex' shorthand?flex: flex-grow flex-shink flex-basis;
por padrão o elemento é
flex: 0 1 auto;
se precisamos que funciona em antigas versões do Internet Explorer, não devemos utilizar a shorthand.
Información
- Descripción
- asa (Front-End Foundations ) Technical Skills Fichas sobre Flexbox - CodeSchool, creado por Victor Bini el 14/01/2017.
- Creado por
- Victor Bini
- Visitas
- 3
- Valoración