CSS3 Flexbox Posicionando elementos parte 3

CSS3 Flexbox Posicionando elementos parte 3

18/08/2018 0 Por Alisson Suassuna

Opa pessoal, o artigo dessa semana será o último da série CSS3 Flexbox Posicionando elementos, se você caiu neste artigo, saiba que temos mais dois tratando desse assunto, esse é uma continuação dos artigos parte 1 e 2  para acessar clique em Parte 1 e Parte 2, vamos ao código base para que possamos dar sequência aos nossos estudos de Flexbox.

Código Base Exemplo Flexbox


Flexbox

Como já sabemos, o código base é apenas para facilitar nossos exemplos, e para dizer ao browser que queremos trabalhar com Flexbox, precisamos escrever display: flex. sabemos também que o flex-direction por padrão é row, recomendo a leitura dos artigos anteriores para ter um melhor entendimento.

Propriedade: flex-basis


Nota: Main axis padrão: row.

FlexBox


Nota: Mudando o main axis para coluna.

FlexBox

Essa propriedade é a maneira oficial de aplicar o tamanho do elemento dentro do flex-container sempre no sentido do main axis, lembrando que nos artigos anteriores foi explicado esses conceitos. Podemos usar a propriedade width também, mas vale ressaltar que a especificidade é maior para o flex-basis, exemplo se aplicarmos as duas propriedades, como regra o browser irá sobrescrever o width para o flex-basis, se você estiver trabalhando com o main axis em coluna, o flex-basis será a altura, se for row o tamanho será a largura.

Propriedade de atalhos

Essas propriedades são bem interessantes, pois com uma única escrita podemos configurar vários comportamentos do elemento que foi selecionado. A propriedade flex, é uma propriedade de atalho, nela podemos configurar o grow, shrink e basis.


FlexBox

Observe o elemento 4. Para visualizar melhor os comportamentos aplicados com essa propriedade de atalho, recomendo alterar o tamanho do flex-container.

Conclusão

Finalizamos os estudos de FlexBox com essa terceira parte, espero muito que o conhecimento passado aqui tenha ajudado. Por favor deixa nos comentários o que você achou dessa série, caso tenha algo acrescentar por favor comenta, deixa seu like e compartilhe para que mais pessoas venham conhecer o site.

Links da série de artigos sobre FlexBox.

FlexBox Parte 1

FlexBox Parte 2

Recomendações de Estudos

Web Completo 2.0 – 11 cursos + 11 projetos

Aprenda HTML5, CSS3, BootStrap 4, JS, ES6, PHP 7, OO, MySQL, DAO, PDO, AJAX, JQuery, MVC, API, IONIC, WP e muito mais!

Código Limpo. Habilidades Práticas Do Agile Software