O CSS Flexible Box Layout, conhecido como Flexbox, é um modelo de layout da Web CSS3. Está no estágio de recomendação de candidatos do W3C. O layout flexível permite que os elementos responsivos dentro de um contêiner sejam organizados automaticamente, dependendo do tamanho da tela.
O display: flex funciona de uma maneira diferente dos outros displays. Quando colocamos essa propriedade em um elemento, esse elemento se torna um flex container, a partir daí podemos manipular todos os elementos filhos desse flex container com propriedades novas.
O flex-basis define o tamanho inicial que um item deve ter antes que o espaço ao seu redor seja distribuído. Ou seja, dependendo da direção do eixo principal (horizontal ou vertical), essa propriedade define a largura ou altura mínima do elemento antes que ele seja redimensionado por outras propriedades.
A propriedade faz com que o elemento se estique e ocupe qualquer espaço disponível nesse eixo, ou uma proporção dele, caso outros elementos-irmãos também possam crescer.
Como foi dito, . break deve ocupar 100% da largura do container ( flex-basis: 100% ), o item flexível de quebra precisa ficar na sua própria linha para conseguir isso.
Aprenda Flexbox em 10 Minutos | Tutorial de HTML & CSS
É possível fazer a quebra de linha dos itens flex?
Quebra de Linha (Wrap)
Por padrão, os itens flexíveis tentam se ajustar em uma única linha dentro do contêiner flex. No entanto, quando há mais itens do que o espaço disponível, é possível permitir que eles sejam quebrados em linhas adicionais usando a propriedade `flex-wrap`.
Formalmente, a propriedade display define os tipos de exibição internos e externos de um elemento. O tipo externo define a participação de um elemento no layout de fluxo (en-US); o tipo interno define o layout dos filhos.
O que acontece ao adicionar a propriedade display flex no elemento body?
2 • flex-direction
Por padrão ele é row (linha), por isso quando o display: flex; é adicionado, os elementos ficam em linha, um do lado do outro. A mudança de row para column geralmente acontece quando estamos definindo os estilos em media queries para o mobile.
tenta colocar valores maiores no item que você deseja que "encolha" mais quando a tela ficar menor. já vai fazer com que o primeiro item encolha 2x mais que os demais itens que estão com o valor default de 1.
Os dois termos se referem a mesma coisa (Flex, Flexbox, Flexible Box Module, One-dimensional layout e etc). O flexbox não é um framework CSS e sim, um conjunto de funcionalidades e conceitos que já são intrínsecos na própria linguagem CSS.
Com o inline-block você terá o comportamento de um elemento inline, porém permitindo que altere as margens, altura, largura e padding do seu elemento assim como um elemento do tipo block.
No display inline, todos os elementos preenchem uma única linha, por isso ficam alinhados, no caso do block, cada elemento da lista ocupa uma linha, por isso ficam um abaixo do outro. Comparado com inline, a principal diferença é que display: inline-block permite definir uma largura e altura no elemento.
Enquanto a propriedade flex-grow permite aumentar a largura dos elementos dentro do contêiner para completar o espaço disponível no eixo principal, a propriedade flex-shrink faz o oposto, controlando a redução dos mesmos.
O comportamento padrão dos itens de um elemento flex é ficar em uma única linha. Se a largura total de todos os itens for maior do que o espaço disponível, os itens continuarão na mesma linha. Esta propriedade permite que os itens sejam jogados em outra linha caso não haja mais espaço na linha.
align-items — controla o alinhamento de todos os itens no eixo transversal. align-self — controla o alinhamento individual de um item no eixo transversal. align-content — descrito na especificação como "packing flex lines"; controla o espaço entre as linhas no eixo transversal.
Flexbox é ótimo para organizar itens em uma única linha ou coluna, como um menu de navegação. Grid é perfeito para criar layouts mais complexos, como a página de um jornal, onde você precisa de várias linhas e colunas. Você pode até mesmo usar os dois juntos para layouts superpoderosos!
O grid-gap é um atalho para declarar as duas propriedades em um só lugar. Se você passar um único valor, os dois serão aplicados para o espaço para linhas e colunas. Se passar dois valores, o primeiro será para linhas e o segundo para colunas.
Qual a propriedade mais importante para controlar o layout?
Para controlar o layout a propriedade mais importante é o display. O display vai permitir especificar como o elemento será exibido. Sabendo que o valor de exibição padrão nas maiorias dos elementos é block ou inline, dessa forma irá alterar a forma como o elemento é exibido e não o tipo de elemento que é.
Essa propriedade tem o objetivo de definir a altura da caixa que um conteúdo de texto pertence. É preciso estamos atentos a esse detalhe! O line-height definirá a altura que o texto pode ocupar, mas não definirá o tamanho daquele texto, pois para isso temos a propriedade font-size .
A quebra de página auxilia na formatação do texto. Apesar deixar algumas pessoas perdidas, o recurso serve mais para organizar que atrapalhar. Digamos que você acabou um capítulo no meio de uma página, o que faria em seguida, para começar o segundo capítulo?
