Patrick Cordeiro

Como centralizar as coisas com o flexbox CSS

Como centralizar as coisas com o flexbox CSS

Entenda como centralizar itens utilizando Flexbox

Patrick Cordeiro's photo
Patrick Cordeiro
·

4 min read

É normal que alguém iniciante tenha dificuldades para tarefas “simples”, como alinhar um item na página. Eu mesmo já passei por isso, perdendo um tempo precioso tentando posicionar determinado item no centro do site, por exemplo.

Abaixo, vou mostrar alguns meios que podemos utilizar para alinhar as coisas de maneira prática, com a utilização de um recurso disponibilizado pelo próprio CSS, chamado “ flexbox ”.

Os recursos que vamos utilizar serão esses:

  • display: flex;
  • justify-content: flex-start;
  • justify-content: center;
  • justify-content: flex-end;
  • align-items: flex-start;
  • align-items: center;
  • align-items: flex-end;

Alinhamento horizontal

O HTML abaixo será o mesmo durante todos os exemplos.

Código HTML:

<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" type="text/css" href="style.css">

        <title>Flexbox</title>
    </head>
    <body>

        <div class="container">
            <div class="item">
                Example
            </div>
        </div>

    </body>
</html>

Alinhando no início, na horizontal:

horizontal-flex-start.PNG

Código CSS

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    background-color: grey;
    justify-content: flex-start;/* Basta alterar esta propriedade para alinhar a classe .item */
}

.item {
    width: 300px;
    height: 150px;
    padding: 8px;
    background-color: green;
    font-family: arial, sans-serif, helvetica;
    font-size: 20px;
}

Centralizando na horizontal:

horizontal-center.PNG

Código CSS

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    background-color: grey;
    justify-content: center;/* Basta alterar esta propriedade para alinhar a classe .item */
}

.item {
    width: 300px;
    height: 150px;
    padding: 8px;
    background-color: green;
    font-family: arial, sans-serif, helvetica;
    font-size: 20px;
}

Alinhando no final, na horizontal:

horizontal-flex-end.PNG

Código CSS

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    background-color: grey;
    justify-content: flex-end;/* Basta alterar esta propriedade para alinhar a classe .item */
}

.item {
    width: 300px;
    height: 150px;
    padding: 8px;
    background-color: green;
    font-family: arial, sans-serif, helvetica;
    font-size: 20px;
}

Alinhamento Vertical

Alinhando no início, na vertical:

horizontal-flex-start.PNG

Código CSS

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    background-color: grey;
    align-items: flex-start;/* Basta alterar esta propriedade para alinhar a classe .item */
}

.item {
    width: 300px;
    height: 150px;
    padding: 8px;
    background-color: green;
    font-family: arial, sans-serif, helvetica;
    font-size: 20px;
}

Centralizando na vertical:

vertical-center.PNG

Código CSS

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    background-color: grey;
    align-items: center;/* Basta alterar esta propriedade para alinhar a classe .item */
}

.item {
    width: 300px;
    height: 150px;
    padding: 8px;
    background-color: green;
    font-family: arial, sans-serif, helvetica;
    font-size: 20px;
}

Alinhando no final, na vertical:

vertical-flex-end.PNG

Código CSS

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    background-color: grey;
    align-items: flex-end;/* Basta alterar esta propriedade para alinhar a classe .item */
}

.item {
    width: 300px;
    height: 150px;
    padding: 8px;
    background-color: green;
    font-family: arial, sans-serif, helvetica;
    font-size: 20px;
}

Centralizar na vertical e na horizontal

center.PNG

Código CSS

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    background-color: grey;
    justify-content: center;/* Basta alterar esta propriedade para alinhar a classe .item */
    align-items: center;/* Basta alterar esta propriedade para alinhar a classe .item */
}

.item {
    width: 300px;
    height: 150px;
    padding: 8px;
    background-color: green;
    font-family: arial, sans-serif, helvetica;
    font-size: 20px;
}

Conclusão

Com o uso do flexbox é muito mais simples alinhar itens. Entretanto, é importante lembrar que o flexbox é uma ferramenta que utiliza vários atributos para o alinhamento de itens, sendo apresentado nesta publicação somente alguns deles.

Pra você que quer saber um pouco mais sobre o assunto, eu indico os sites abaixo:

MDN Web Docs - Conceito

W3 Scholls - Exemplos e exercícios

css flexboxflexboxCSS3HTML5CSS