FLEXBOX FLEX CONTAINER. O Flex Container é a tag que envolve os itens flex, ao indicar display: flex, essa tag passa a ser um Flex Container.

Transcrição

1 FLEXBOX O CSS Flexbox pode ser considerado como parte de uma especificação do CSS3 que permite com que os desenvolvedores consigam ter melhores ferramentas para organizar elementos na página previsivelmente quando o layout precisa ser visualizado em diversos tamanhos de tela e em diversos dispositivos (RESPONSIVIDADE). Estes elementos podem ser utilizados de uma forma bem simples: os filhos de um elemento com flexbox pode se posicionar em direções definidas e pode ter dimensões flexíveis para se adaptar. Dessa forma, é possível posicionar os mais variados elementos independentes da sua posição na estrutura do HTML. FLEX CONTAINER O Flex Container é a tag que envolve os itens flex, ao indicar display: flex, essa tag passa a ser um Flex Container. 1 - display: flex; // Torna o elemento um flex container automaticamente transformando todos os seus filhos diretos em flex itens. Vamos ver na prática. Veja o seguinte código e sua saída. Flexbox1.html header { width:300px; Podemos notar que aparentemente não houve mudança em nada pois e como de tivéssemos definido que que tudo que estiver dentro da tag estive com o display:block. Agora no exemplo abaixo vamos apenas colocar display:flex dentro da tag e vamos mudar o width de 300px para 500px, agora vamos ver como fica as mudanças

2 Flexbox2.html Vemos agora as <div> com a classe item foram criadas dentro do foram criadas com tamanho exato do conteúdo interno da <div> e começaram pelo lado esquerdo (left) Então podemos observar que a tag é o nosso Flex Container e as divs dispostas dentro são nossos Flex Itens. A direção que os flex itens estão dispostos dentro do flex container é a propriedade que chamaremos de flex-direction Na imagem do arquivo FlexBox1.html só colocamos display:flex e por padrão o flex-direction assume o valor de row ( linha). Flexbox3.html flex-direction:row-reverse;

3 Veja a mudança os flex itens foram para o lado final mas sua ordem foi invertida. Mas além de row (linha) podemos trabalhar com coluna usando mais dois valores na propriedade flex-direction. O valor colunm e colunm-reverse. Flexbox4.html flex-direction:column; E agora usando colunm-reverse vamos ver o que acontece. Flexbox5.html flex-direction:column-reverse;

4 Observe que os flex-itens estão em ordem inversa. AGORA UMA DÚVIDA. E se os flex itens ocuparem mais espaço (overflow) que o flex contaneir, vamos ver no exemplo abaixo. Neste exemplo vai ser tirado o flex-direction o width (largura) vamos diminuir para 300px e vamos colocar uma <div> a mais. Flexbox6.html width:300px; <div class=item>item 5</div> Notamos que o a div que contém o item 5 estourou o tamanho do container. Para ajeitarmos esta situação usamos uma nova propriedade que é chamada de flex-wrap (uma tradução livre embrulhar). Vamos agora apenas colocar a propriedade flex-wrap com o valor wrap, ou seja flex-wrap:wrap. Mas para saber o valor padrão que já vem configurado é flex-wrap:nowrap

5 Flexbox7.html flex-wrap:wrap; width:300px; Note que automaticamente o item-flex que estava fora foi posicionado fora foi recolocado dentro container numa posição abaixo. E se caso trocarmos wrap para flex-wrap:wrap-reverse, vejamos como fica agora a nossa renderização do código. Agora houve uma inversão na ordem de apresentação., Agora vamos trabalhar com o alinhamento ao longo do eixo horizontal dos flexitens dentro do container. Para isso vamos usar a propriedade justify-content, Temos os valores flex-start/flex-end/center/space-between/space-around Vamos usar center / space-between / space-around Primeiro vamos aumentar o width (largura) para 600px para termos uma visualização melhor da capacidade do justify-content Usando justify-content:center

6 Flexbox8.html width:600px; justify-content:center; Usando justify-content: /space-between Flexbox9.html width:600px; justify-content: space-between;

7 Usando justify-content: /space-around Flexbox9.html width:600px; justify-content: space-around;