É um método de layout para dispor itens em linhas e colunas, permitindo distribuir o espaço dinamicamente entre elementos de tamanho desconhecido.
Para usá-lo, basta usar a propriedade display com o valor flex:
.box {
display: flex;
}
Dois eixos importantes de se conhecer:
flex-directionÉ uma propriedade que determina como os flex items são posicionados no flex container, definindo o main axis e o sentido (normal ou invertido).
Seu valor padrão é row: o main-axis terá a mesma direção do texto (geralmente horizontal), e os pontos main-start e main-end são os mesmos do sentido do texto/conteúdo.
Alguns outros valores que ele pode assumir:
column: seu main-axis é o mesmo do block-axis (geralmente vertical). O main-start e o main-end são os mesmos que os pontos before e after do modo de escrita.row-reverse: se comporta como a row, mas seu main-start e main-end são opostos ao sentido do conteúdo.column-reverse: se comporta como a column, mas seu main-start e main-end são opostos ao sentido do conteúdo.flex-wrap