Flexbox

O Flexbox é um modelo de layout que permite organizar os elementos espacialmente dentro da sua interface. Nesse artigo vamos descrever suas principais propriedades, para mais informação recomendamos esse guia.

Antes de entrarmos nas propriedades precisamos definir um elemento como flex, isso significa que todos os elementos dentro dele (que vamos chamar de contêiner ) irão seguir as propriedades do contêiner. Abaixo mostramos como definir um elemento como flex.

.container {
  display: flex; 
}

flex-direction

Essa propriedade irá definir a direção em que os itens serão posicionados. Os valores da propriedades podem ser:

Os itens serão posicionados da esquerda para a direita (opção padrão).

justify-content

Essa propriedade irá definir o alinhamento dos itens. Os valores da propriedades podem ser:

Os itens serão alinhados no começo da linha (opção padrão).

flex-wrap

Por padrão todos elementos alinhados em uma linha, é possível modificar isso com a propriedade flex-wrap. Os valores da propridade podem ser:

Todos os itens serão alinhados em uma linha (opção padrão).

align-content

Organiza a distribuição dos itens no eixo y.

Distribui os itens de modo que ocupem todo o espaço disponível do eixo y. (opção padrão).

Abaixo temos um exemplo completo de como essas propriedades podem ser usadas. Na primeira aba temos o código em HTML, na segunda o CSS e por último a página resultante.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Flexbox</title>
</head>
<body>
    <div id="Exe1">
        <p>Caixa 1</p>
        <p>Caixa 2</p>
        <p>Caixa 3</p>
    </div>

    <div id="Exe2">
        <p>Caixa 1</p>
        <p>Caixa 2</p>
        <p>Caixa 3</p>
        <p>Caixa 4</p>
        <p>Caixa 5</p>
        <p>Caixa 6</p>
        <p>Caixa 7</p>
    </div>
</body>
</html>

p {
    border: mediumvioletred 2px solid;
}

#Exe1 {
    border: black 2px solid;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#Exe2 {
    border: black 2px solid;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

PreviousPrincipais propriedades NextGrid

Last updated 4 years ago

Was this helpful?