A propriedade display CSS define se um elemento é tratado como um bloco ou elemento inline (en-US) e o layout usado para seus filhos, como layout de fluxo (en-US), grid ou flex.
Formalmente, a propriedade display define os tipos de exibição internos e externos de um elemento. O tipo externo define a participação de um elemento no layout de fluxo (en-US); o tipo interno define o layout dos filhos. Alguns valores de display são totalmente definidos em suas próprias especificações individuais; por exemplo, o detalhe do que acontece quando display: flex é declarado é definido na especificação CSS Flexible Box Model.
A propriedade CSS display é especificada usando valores de palavra-chave.
display: flex;: Define o elemento como um container flexível.flex-direction: Define a direção principal dos itens flexíveis no container. Pode ser uma das seguintes opções:
row: Itens são dispostos na mesma linha (padrão).row-reverse: Itens são dispostos na mesma linha, mas em ordem reversa.column: Itens são dispostos em uma coluna.column-reverse: Itens são dispostos em uma coluna, em ordem reversa.flex-wrap: Controla se os itens flexíveis devem ser quebrados para uma nova linha quando não couberem no container. Opções incluem:
nowrap: Itens não serão quebrados (padrão).wrap: Itens serão quebrados em novas linhas conforme necessário.wrap-reverse: Itens serão quebrados em novas linhas, mas em ordem reversa.justify-content: Controla o alinhamento dos itens flexíveis ao longo do eixo principal. Opções incluem:
flex-start: Itens alinhados no início do container (padrão).flex-end: Itens alinhados no final do container.center: Itens centralizados ao longo do eixo principal.space-between: Itens distribuídos igualmente com espaço entre eles.space-around: Itens distribuídos igualmente com espaço ao redor deles.align-items: Controla o alinhamento dos itens flexíveis ao longo do eixo transversal. Opções incluem:
stretch: Itens são esticados para preencher o container (padrão).flex-start: Itens alinhados no início do eixo transversal.flex-end: Itens alinhados no final do eixo transversal.center: Itens centralizados ao longo do eixo transversal.baseline: Itens alinhados à linha de base.align-content: Controla o alinhamento das linhas quando há várias linhas de itens flexíveis no container. Opções incluem:
stretch: Linhas são esticadas para preencher o container (padrão).flex-start: Linhas alinhadas no início do container.flex-end: Linhas alinhadas no final do container.center: Linhas centralizadas ao longo do eixo transversal.space-between: Linhas distribuídas igualmente com espaço entre elas.space-around: Linhas distribuídas igualmente com espaço ao redor delas.flex: Define a capacidade de expansão (flexibilidade) de um item flexível dentro do container. Pode ser uma combinação de três valores: flex-grow, flex-shrink, e flex-basis.flex-flow: wrap row; <O flex-flow serve pra vc utilizar duas sintaxe CSS
que é o flex-direction e o flex-warp em um só linha>
flex-grow: <1, 2 ou 3>; <Esta propriedade define a proporção com que um item evitando deixa,
buracos na tela devendo crescer caso seja necessário. Por padrão seu valor é 0,
o que indica que o item não deve crescer, e são aceitos apenas valores numéricos positivos.>
flex-shrink: <0, 1, 2...>; <Esta propriedade define a proporção com que um item,
deve encolher caso seja necessário. Essa propriedade aceita apenas valores positivos,
e seu valor padrão é 1. Caso atrubuido 0 a imagem ira passar a borda aparecendo um scroll.>
flex-basis: <auto, 0 ou valor em px/%>; <define o tamanho inicial dos elementos em
unidades de pixel, antes que o espaço disponível seja redistribuído.
O valor inicial da propriedade é auto — neste caso o navegador observa se os itens,
possuem o mesmo tamanho.>
flex: 1 1 200px; <valor grow, valor shrink, valor basis>