foi projetado tanto como um modelo de layout unidimensional quanto como um método capaz de organizar espacialmente os elementos em uma interface, além de possuir capacidades avançadas de alinhament
visa organizar os elementos de uma pág html dentro de seus containers de forma dinâmica
todas as operações realizadas relacionam-se a dois eixos: o eixo principal e o eixo transversal.
É definido através da propriedade flex-direction , se o flex-direction for definido como row ou row-reverse "organização em linha" , o eixo principal do container será horizontal.
Já se essa propriedade receber o valor column ou column-reverse "organização em coluna", o eixo principal será o vertical.
o eixo transversal, encontra-se na direção perpendicular ao principal, ou seja, se o principal for o vertical, o transversal será o horizontal e vice-versa.
Exemplo
Fonte: Devmedia
A área de um documento que faz uso do flexbox é chamado de contêiner flex. Para criar essa estrutura é so definir o container como display: flex; Ao fazer isso, os elementos-filhos desse contêiner fica com o tipo flex . Lembrando que todas as propriedades no CSS possuem valores padrão, ao criar um contêiner flex, os elementos vão ter esse comportamento:
flex-diction está definido como rowflex-basis está definido como autoflex-wrap está definido comonowrap