O que é: O flexbox é um método de organização de layout. Com ele, você manipula itens dentro de um container de forma dinâmica, ou seja, independente do tamanho do container, os itens vão estar se adaptando a ele.
Para que serve: As aplicações que criamos, elas são acessadas de vários dispositivos. E como foi dito, o flexbox vai organizar o container de acordo com o tamanho do dispositivo. Com isso, nós podemos fazer diversas manipulações de forma automática para vários dispositivos.
Quando é utilizado: O flexbox ele é muito utilizado quando nós queremos organizar coisas em linhas, e as vezes algumas manipulações que fazemos que coluna também. É muito comum ver o flexbox sendo utilizado em header e barra de navegação, pois com ele, nós fazemos a logo ficar em um canto e os botões de navegação em outro.
-
Um exemplo que utilizamos, é no projeto final do curso. Lá, nós colocarmos a logo em um local e os botões em outro.
-
E exatamente como foi dito, o flexbox vai fazer com que em tamanhos de tal menor, os botões e a logo seja adaptada.
-
E o flexbox com essa adaptação, também tem uma opção de quebra, onde em determinado tamanho de tela, os itens vão ficar uma abaixo do outro, e aí podemos manipular com um media query, por exemplo.
O flexbox também pode ser usado em outros casos. Como foi dito, ele começa em formato de linha, ou seja, com os itens na horizontal. Mas em alguns momentos nós podemos colocar tudo na vertical para fazer alguma manipulação específica para o layout.