CSS3 introduz um novo modelo de caixa - o modelo flex box, que determina como uma caixa é distribuída entre outras caixas e como o espaço disponível é tratado. Isso é semelhante ao XUL (a linguagem de interação do usuário usada pelo Firefox), e outras linguagens também usam o mesmo modelo de caixa, como XAML e GladeXML.
Usando este modelo, você pode criar facilmente um layout fluido que se adapta à janela do navegador ou um layout flexível que se adapta ao tamanho da fonte. Os exemplos neste artigo usam o seguinte código HTML:
<corpo>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
</body>
O modelo de caixa tradicional organiza as caixas verticalmente com base no fluxo HTML. Usando o modelo flexbox você pode especificar uma ordem específica e revertê-la. Para habilitar o modelo de caixa flexível, basta definir o valor do atributo de exibição da caixa com caixas filhas como box (ou inline-box).
exibição: caixa;
Distribuição horizontal ou vertical
"box-orient" define os eixos coordenados da distribuição: vertical e horizontal. Esses dois valores definem como a caixa é exibida
corpo{
exibição: caixa;
orientação de caixa: horizontal;
}
distribuição reversa
"box-direction" pode definir a ordem em que as caixas aparecem. Por padrão, você só precisa definir o eixo de distribuição - as caixas são distribuídas com o fluxo html. Se for um eixo horizontal, é distribuído da esquerda para a direita; se for um eixo vertical, é distribuído de cima para baixo; Defina o valor do atributo "box-direction" como "reverse" para inverter a ordem das caixas.
corpo {
exibição: caixa;
orientação de caixa: vertical;
direção da caixa: reversa;
}
distribuição específica
O atributo “box-ordinal-group” define a ordem em que as caixas são distribuídas. A ordem de distribuição pode ser controlada à vontade. Os grupos são definidos com um número começando em “1” e o modelo caixa irá distribuir esses grupos primeiro e todas essas caixas ficarão em cada grupo. A distribuição será organizada de pequeno a grande porte.
corpo {
exibição: caixa;
orientação de caixa: vertical;
direção da caixa: reverso;
}
#caixa1 {
grupo-ordinal-caixa: 2;
}
#caixa2 {
grupo-ordinal-caixa: 2;
}
#caixa3 {
grupo-ordinal-caixa: 1;
}
