Flexbox - Flex Containers

Para usar o Flexbox em seu aplicativo, você precisa criar / definir um flex container usando o display propriedade.

Usage -

display: flex | inline-flex

Esta propriedade aceita dois valores

flex - Gera um contêiner flexível de nível de bloco.
inline-flex - Gera uma caixa de contêiner flexível em linha.

Agora, veremos como usar o display propriedade com exemplos.

Flex

Ao passar este valor para a propriedade display, um flex container de nível de bloco será criado. Ele ocupa toda a largura do contêiner pai (navegador).

O exemplo a seguir demonstra como criar um flex container em nível de bloco. Aqui, estamos criando seis caixas com cores diferentes e usamos o flex container para segurá-las.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:flex;
      }
      .box{
         font-size:35px;
         padding:15px;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Uma vez que demos o valor flex ao display propriedade, o contêiner usa a largura do contêiner (navegador).

Você pode observar isso adicionando uma borda ao contêiner, conforme mostrado abaixo.

.container {
   display:inline-flex;
   border:3px solid black;
}

Isso produzirá o seguinte resultado -

Flex inline

Ao passar este valor para o display, um flex container de nível embutido será criado. Ele apenas ocupa o lugar necessário para o conteúdo.

O exemplo a seguir demonstra como criar um flex container embutido. Aqui, estamos criando seis caixas com cores diferentes e usamos o contêiner inline-flex para segurá-las.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:inline-flex;
         border:3px solid black;
      }
      .box{
         font-size:35px;
         padding:15px;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Como usamos um flex container embutido, ele apenas ocupou o espaço necessário para envolver seus elementos.

↰ Previous page Next page ↱