path: root/files/pt-br/css/usando_caixas_flexiveis_css/index.html

---
title: Usando CSS flexible boxes (Caixas Flexíveis)
slug: CSS/Usando_caixas_flexiveis_css
translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
---
<p>{{ SeeCompatTable() }}</p>

<p>CSS Flexible Box Layout Model (Modelo de Layout Caixas Flexíveis de CSS), também conhecida como "flexbox", é parte do rascunho da especificação do CSS3. Ele provê uma CSS Box Model otimizada para o design de interfaces com o usuário. Elementos filhos no layout flex podem ser posicionados em qualquer direção e possuem dimensões flexíveis para se adaptar ao espaço disponível. Posicionar esses nodos filhos pode ser feito facilmente, e layouts complexos podem ser construídos de uma maneira mais clara e limpa. A ordem de exibição dos elementos é independente da ordem no código fonte.</p>

<div class="note"><strong>Nota:</strong> a especificação de CSS Flexible Boxes Layout ainda é um rascunho, portanto todas as propriedade devem ser prefixadas com <code>-ms-</code>, <code>-moz-</code>, <code>-o-</code> e <code>-webkit-</code> para garantir a compatibilidade com os navegadores Internet Explorer, Firefox (Gecko), Opera e Chrome/Safari (Webkit), respectivamente.</div>

<p>Veja <a href="/en/CSS/Flexbox" title="/en/CSS/Flexbox">Flexbox</a> para uma introdução à API.</p>

<h2 id="Conceito_de_Caixas_Flexíveis">Conceito de Caixas Flexíveis</h2>

<p>O algoritmo de layout flexbox é agnóstico a direcionamento, em oposição ao layout de bloco (block layout), que é orientado verticalmente, ou ao layout inline, que é orientado horizontamente. Enquanto o layout de bloco funciona bem para páginas, ele carece de definição suficiente para suportar componentes de aplicação que necessitam mudar de orientação, tamanho, aumentar ou encolher, redirecionar da vertical para horizontal, e assim por diante. Flexbox layout é o mais apropriado para os componentes de uma aplicação, ou layouts de pequena escala, enquanto o (emergente) layout de Grid (Grid layout) é planejado para larga escala. Ambos fazem parte de um esforço mais amplo com o CSS3 para proporcionar uma maior interoperabilidade de aplicações web com diferentes agentes de usuário, diferentes modos de escrita, e outras demandas de flexibilidade.</p>

<h2 id="Terminologia_de_Caixas_Flexíveis">Terminologia de Caixas Flexíveis</h2>

<p>Ainda que a discussão sobre flexbox gire em torno de termos como eixos horizontais ou em linha, ou eixos verticais ou em bloco, faz-se necessário uma nova terminologia para melhor descrever esse novo modelo. O diagrama abaixo ilustra os termos que serão apresentados a seguir. Ele mostra um container flex que tem uma direção no sentido da linha (NT: <code>flex-direction</code> of <code>row</code>), o que significa que os itens flex seguem uns aos outros horizontalmente através do eixo principal (NT: <em>main axis</em>) de acordo com o sentido de escrita (sentido em que o texto flui), nesse caso da esquerda para a direita.</p>

<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png"></p>

<dl>
 <dt>Container Flex</dt>
 <dd>O elemento pai sobre o qual os itens flex estão contidos. Um container flex é definido usando os valores <code>flex</code> ou <code>inline-flex</code> da propriedade <code><a href="/en/CSS/display" rel="internal" title="display">display</a>.</code></dd>
 <dt>Item Flex</dt>
 <dd>
 <p>Cada nó filho de um container flex é um item flex. Quando um texto é adicionado diretamente ao container flex, ele é encapsulado e um item flex anônimo.</p>

 <div class="note">Nota: Se um bloco anônimo contém apenas espaços em braco, o box poderá não ser gerado se ele tiver a propriedade <code>display:none</code>.</div>

 <div class="note">Nota: Os filhos de um container flex que que possuem posicionamento absoluto são posicionados staticamente de acordo com o canto inicial (NT: head start corner) do container flex pai.</div>
 </dd>
 <dt>Eixos</dt>
 <dd>
 <p>Cada layout flexbox possui dois eixos: o eixo principal (NT: main axis), por onde os itens flex seguem uns aos outros e o eixo cruzado (NT: cross axis), perpendicular ao eixo principal.</p>

 <ul>
  <li>A propriedade <code><a href="/en/CSS/flex-direction" rel="internal" title="flex-direction">flex-direction</a></code> define o eixo principal.</li>
  <li>A propriedade <a href="/en/CSS/justify-content" rel="internal" title="en/CSS/justify-content"><code>justify-content</code></a> define como os itens flex são posicionados sobre o eixo principal em uma determinada linha.</li>
  <li>A propriedade <a href="/en/CSS/align-items" title="en/CSS/align-items"><code>align-items</code></a> define o padrão sobre como os itens flex são posicionados sobre o eixo cruzado em uma determinada linha.</li>
  <li>A propriedade <a href="/en/CSS/align-self" title="en/CSS/align-self"><code>align-self</code></a> define como um determinado item flex deve ser alinhado no eixo principal. Essa propriedade sobrescreve o padrão estabelecido por <code>align-items.</code></li>
 </ul>
 </dd>
 <dt>Directions</dt>
 <dd>
 <p>The <strong>main start</strong>/<strong>main end </strong>and <strong>cross start</strong>/<strong>cross end</strong> sides pairs of the flex container describe the origin and terminus of the flow of flex items. They follow the main axis and cross axis of the flex container in the vector established by the <code>writing-mode</code> (left-to-right, right-to-left, etc.).</p>

 <ul>
  <li>The <a href="/en/CSS/order" rel="internal" title="en/CSS/order"><code>order</code></a> property assigns elements to ordinal groups and determines which elements appear first.</li>
  <li>The <a href="/en/CSS/flex-flow" rel="internal" title="flex-flow"><code>flex-flow</code></a> property shorthands the <a href="/en/CSS/flex-direction" rel="internal" title="flex-direction"><code>flex-direction</code></a> and <a href="/en/CSS/flex-wrap" rel="internal" title="flex-wrap"><code>flex-wrap</code></a> properties to lay out the flex items.</li>
 </ul>
 </dd>
 <dt>Lines</dt>
 <dd>
 <p>Flex items can be laid out on either a single line or on several lines according to the <a href="/en/CSS/flex-wrap" rel="internal" title="flex-wrap"><code>flex-wrap</code></a> property, which controls the direction of the cross axis and the direction in which new lines are stacked.</p>
 </dd>
 <dt>Dimensions</dt>
 <dd>
 <p>The flex items' agnostic equivalents of height and width are <strong>main size</strong> and <strong>cross size,</strong> which respectively follow the main axis and cross axis of the flex container.</p>

 <ul>
  <li>The <code><a href="/en/CSS/min-height" title="/en/CSS/min-height">min-height</a></code> and <code><a href="/en/CSS/min-width" title="/en/CSS/min-width">min-width</a></code> properties have a new value, <code>auto</code> that establishes the minimum size of a flex item.</li>
  <li>The <a href="/en/CSS/flex" rel="internal" title="en/CSS/flex"><code>flex</code></a> property shorthands the <code><a href="/en/CSS/flex-basis" rel="internal" title="en/CSS/flex-basis">flex-basis</a></code>, <a href="/en/CSS/flex-grow" rel="internal" title="en/CSS/flex-grow"><code>flex-grow</code></a>, and <a href="/en/CSS/flex-shrink" rel="internal" title="en/CSS/flex-shrink"><code>flex-shrink</code></a> properties to establish the flexibility of the flex items.</li>
 </ul>
 </dd>
</dl>

<h2 id="Designando_uma_flexible_box">Designando uma flexible box</h2>

<p>Para designar o CSS parar elementos usandos esse estilo, a propriedade <a href="/en/CSS/display" title="/en/CSS/display">display</a> deve ser setada da seguinte forma:</p>

<pre>display :  flex</pre>

<p>ou</p>

<pre>display : inline-flex</pre>

<p>Definindo o elemento como flex container e seus filhos como flex items. O valor <code>flex</code> faz o conteiner uma elemento de block-level. O valor <code>inline-flex</code> faz o flex conteiner um elemento  inline-level atmico.</p>

<div class="note"><strong>Note:</strong> For the vendor prefix tag, append the string on the display property (not on the display attribute itself). For example, <code>display : -webkit-flex</code>.</div>

<h2 id="Flexible_box_properties">Flexible box properties</h2>

<p><span id="cke_bm_69S"> </span>{{ page("/en-US/docs/CSS/Flexbox", "flex- properties") }}<span id="cke_bm_69E"> </span></p>

<dl>
</dl>

<h3 id="Propriedades_que_não_afetam_container_flexíveis">Propriedades que não afetam container flexíveis</h3>

<p>Desde que os containers flexíveis usam um algoritmo de layout diferente, algumas propriedades não fazem sentido em um container flex.</p>

<ul>
 <li>Propriedades column-* do <a href="/en/CSS/Using_CSS_multi-column_layouts" title="Using CSS multi-column layouts">Módulo de múltiplas colunas</a> não tem efeito no flex.</li>
 <li><a href="/en/CSS/float" title="float"><code>float</code></a> e <a href="/en/CSS/clear" title="clear"><code>clear</code></a> não tem efeito em um item de um container flex. Usar <code>float</code> faz com que a propriedade de display do elemento seja um <code>block.</code></li>
 <li><a href="/en/CSS/vertical-align" title="vertical-align"><code>vertical-align</code></a> não tem efeito no alinhamento de itens de um container flex.</li>
</ul>

<h2 id="Examples">Examples</h2>

<p>These examples run in Chrome version 21 (or Chrome Canary which you can install in addition to Chrome). You can run the examples by creating a file with the code provided and loading it in Chrome Canary.</p>

<h3 id="Basic_flex_example">Basic flex example</h3>

<p>This basic example shows how to apply "flexibility" to an element, and how sibling elements behave in a flexible state. </p>

<pre>​&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;style&gt;

   .flex
   {
      /* basic styling */
      width: 350px;
      height: 200px;
      border: 1px solid #555;
      font: 14px Arial;

      /* flexbox setup */
      display: -webkit-flex;
      -webkit-flex-direction: row;

      display: flex;
      flex-direction: row;
   }

   .flex &gt; div
   {
      -webkit-flex: 1 1 auto;
      flex: 1 1 auto;

      -webkit-transition: width 0.7s ease-out;
      transition: width 0.7s ease-out;
   }

   /* colors */
   .flex &gt; div:nth-child(1){ background : #009246; }
   .flex &gt; div:nth-child(2){ background : #F1F2F1; }
   .flex &gt; div:nth-child(3){ background : #CE2B37; }

   .flex &gt; div:hover
   {
        width: 200px;
   }

   &lt;/style&gt;

 &lt;/head&gt;
 &lt;body&gt;
  &lt;p&gt;Flexbox nuovo&lt;/p&gt;
  &lt;div class="flex"&gt;
    &lt;div&gt;uno&lt;/div&gt;
    &lt;div&gt;due&lt;/div&gt;
    &lt;div&gt;tre&lt;/div&gt;
  &lt;/div&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>

<h3 id="Holy_Grail_Layout_example">Holy Grail Layout example</h3>

<p>This example demonstrates how flexbox provides the ability to dynamically change the layout for different screen resolutions. The following diagram illustrates the transformation.</p>

<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p>

<p>Illustrated here is the case where the page layout suited to a browser window must be optimized for a smart phone window. Not only must the elements reduce in size, but the order in which they are presented must change. Flexbox makes this very simple.</p>

<pre>​
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;style&gt;

  body {
   font: 24px Helvetica;
   background: #999999;
  }

  #main {
   min-height: 800px;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }

  #main &gt; article {
   margin: 4px;
   padding: 5px;
   border: 1px solid #cccc33;
   border-radius: 7pt;
   background: #dddd88;
   -webkit-flex: 3 1 60%;
           flex: 3 1 60%;
   -webkit-order: 2;
           order: 2;
   }

  #main &gt; nav {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 1;
           order: 1;
   }

  #main &gt; aside {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 3;
           order: 3;
   }

  header, footer {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 100px;
   border: 1px solid #eebb55;
   border-radius: 7pt;
   background: #ffeebb;
   }

  /* Too narrow to support three columns */
  @media all and (max-width: 640px) {

   #main, #page {
    -webkit-flex-flow: column;
            flex-flow: column;
   }

   #main &gt; article, #main &gt; nav, #main &gt; aside {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
   }

   #main &gt; nav, #main &gt; aside, header, footer {
    min-height: 50px;
    max-height: 50px;
   }
  }

 &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
 &lt;header&gt;header&lt;/header&gt;
 &lt;div id='main'&gt;
    &lt;article&gt;article&lt;/article&gt;
    &lt;nav&gt;nav&lt;/nav&gt;
    &lt;aside&gt;aside&lt;/aside&gt;
 &lt;/div&gt;
 &lt;footer&gt;footer&lt;/footer&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

<h2 id="Things_to_keep_in_mind">Things to keep in mind</h2>

<p>The algorithm describing how flex items are laid out can be pretty tricky at times. Here are a few things to consider to avoid bad surprises when designing using flexible boxes.</p>

<p>Flexibles boxes are laid out in conformance of the <a href="/pl/XUL/Własność/mode" title="mode">writing mode</a>. Which means that <strong>main start</strong> and <strong>main end</strong> are laid out according to the position of <strong>start</strong> and <strong>end</strong>.</p>

<p><strong>cross start</strong> and <strong>cross end</strong> rely on the definition of the <strong>start</strong> or <strong>before</strong> position that depends on the value of <a href="/en/CSS/direction" title="direction"><code>direction</code></a>.</p>

<p>Page breaks are possible in flexible boxes layout as long as <code>break-</code> property allows it. CSS3 <code>break-after</code>, <code>break-before</code> and <code>break-inside</code> as well as CSS 2.1   <code>page-break-before</code>, <code>page-break-after</code> and <code>page-break-inside</code> properties are accepted on a flex container, flex items and inside flex items.</p>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Firefox (Gecko)</th>
   <th>Chrome</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>21.0{{ property_prefix("-webkit") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Android</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>