A triagem de estudo foi baseada neste guia - CSS-Tricks FlexBox - Origamid
Estudos | Display | Flex Direction | Flex Wrap | Flex Flow | Align Items | Align Content | Flex Grow | Flex Basic | Flex Shrink | Flex |
O display define o elemento como um flex container, tornando todos os filhos flex-itens (ou seja, o flex-itens se adaptando ao flex-container
- Display: Flex
- flex-direction: row
- flex-direction: row-reverse
- flex-direction: column
- flex-direction: column-reverse
-
flex-wrap: nowrap
(Padrão): todos os itens flexíveis estarão em uma linha
- flex-wrap: wrap
os itens flexíveis serão quebrados em várias linhas, de cima para baixo
- flex-wrap: wrap-reverse
os itens flexíveis serão quebrados em várias linhas de baixo para cima
- flex-flow: row nowrap
- flex-flow: row wrap
- flex-flow: column nowrap
- justify-content: flex-start
- justify-content: flex-end
- justify-content: center
- justify-content: space-between
- justify-content: space-around
- justify-content: space-around
- justify-content: space-around // itens com flex: 1
- justify-content: flex-start // column
- justify-content: flex-end // column
- justify-content: flex-center // column
- justify-content: space-between // column
- justify-content: space-around // column
- justify-content: space-between // column // intes com flex: 1
- align-items: stretch
- align-items: flex-start
- align-items: flex-end
- align-items: center
- align-items: baseline
- align-content: stretch
- align-content: flex-start
- align-content: flex-end
- align-content: center
- align-content: space-between
- align-content: space-around
- display: flex
- display: flex
- display: flex
- display: flex
