Revisão 303387 de Usando CSS flexible boxes (Caixas Flexíveis)

  • Slug da revisão: CSS/Usando_caixas_flexiveis_css
  • Título da revisão: Usando CSS flexible boxes (Caixas Flexíveis)
  • ID da revisão: 303387
  • Criado:
  • Criador: deaballe
  • É a revisão atual? Não
  • Comentar

Conteúdo da revisão

{{ SeeCompatTable() }}

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 design de user interface. 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.

Nota: a especificação de CSS Flexible Boxes Layout ainda é um rascunho, portanto todas as propriedade devem ser prefixadas com -ms-, -moz-, -o- e -webkit- para garantir a compatibilidade com os navegadores Internet Explorer, Gecko, Opera e Webkit, respectivamente.

Veja Flexbox para uma introdução à API.

Conceito de Caixas Flexíveis

O algoritmo de layout flexbox é agonó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. Both are part of a wider effort with CSS3 to provide for greater interoperability of web applications with different user agents, different writing modes, and other demands on flexibility.

Flexible boxes vocabulary

While a discussion of flexible boxes is liberated from terms like horizontal/in-line axis and vertical/block axis, it requires a new terminology to properly describe the model. Consider the following diagram when reviewing the vocabulary items below. It shows a flex container that has a flex-direction of row, meaning that the flex items follow each other horizontally across the main axis according to the established writing mode, the direction in which the element's text flows, in this case left-to-right.

flex_terms.png

Flex container
The parent element in which flex items are contained. A flex container is defined using the flex or inline-flex values of the display property.
Flex item

Each child of a flex container becomes a flex item. Text directly contained in a flex container is wrapped in an anonymous flex item.

Note: If the anonymous block contains solely inline containing whitespaces, the box would not be generated as if it had display:none.
Note: Absolutely positioned children of a flex container are positionned so that their static position is determined in reference to the head start content-box corner of their flex container.
Axes

Every flexible box layout follows two axes. The main axis is the axis along which the flex items follow each other. The cross axis is the axis perpendicular to the main axis.

  • The flex-direction property establishes the main axis.
  • The justify-content property defines how flex items are laid out along the main axis on the current line.
  • The align-items property defines the default for how flex items are laid out along the cross axis on the current line.
  • The align-self property defines how a single flex item is aligned on the cross axis, and overrides the default established by align-items.
Directions

The main start/main end and cross start/cross end 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 writing-mode (left-to-right, right-to-left, etc.).

  • The order property assigns elements to ordinal groups and determines which elements appear first.
  • The flex-flow property shorthands the flex-direction and flex-wrap properties to lay out the flex items.
Lines

Flex items can be laid out on either a single line or on several lines according to the flex-wrap property, which controls the direction of the cross axis and the direction in which new lines are stacked.

Dimensions

The flex items' agnostic equivalents of height and width are main size and cross size, which respectively follow the main axis and cross axis of the flex container.

Designating a flexible box

To designate the CSS for elements using this style, set the display property as follows:

display :  flex

or

display : inline-flex

Doing so defines the element as a flex container and its children as flex items. The flex value makes the flex container a block-level element. The inline-flex value makes the flex container an atomic inline-level element.

Note: For the vendor prefix tag, append the string on the display property (not on the display attribute itself). For example, display : -webkit-flex.

Flexible box properties

 {{ page("/en-US/docs/CSS/Flexbox", "flex- properties") }} 

Properties not affecting flexible boxes

Since flexible boxes uses a different layout algorithm, some properties do not make sense on a flex container.

  • column-* properties of the Multicol module have no effect on a flex.
  • float and clear have no effect on a flex item. Using float cause the display property of the element to compute to block.
  • vertical-align has no effect on the alignment of flex items.

Examples

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.

Basic flex example

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

​<!DOCTYPE html>
<html lang="en">
  <head>
    <style>

   .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 > 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 > div:nth-child(1){ background : #009246; }
   .flex > div:nth-child(2){ background : #F1F2F1; }
   .flex > div:nth-child(3){ background : #CE2B37; }

   .flex > div:hover
   {
        width: 200px;
   }
   
   </style>
    
 </head>
 <body>
  <p>Flexbox nuovo</p>
  <div class="flex">
    <div>uno</div>
    <div>due</div>
    <div>tre</div>
  </div>
 </body>
</html>

Holy Grail Layout example

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

HolyGrailLayout.png

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.

​
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>

  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 > 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 > 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 > 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 > article, #main > nav, #main > aside {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
   }
  
   #main > nav, #main > aside, header, footer {
    min-height: 50px;
    max-height: 50px;
   }
  }

 </style>
  </head>
  <body>
 <header>header</header>
 <div id='main'>
    <article>article</article>
    <nav>nav</nav>
    <aside>aside</aside>
 </div>
 <footer>footer</footer>
  </body>
</html>

Things to keep in mind

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.

Flexibles boxes are laid out in conformance of the writing mode. Which means that main start and main end are laid out according to the position of start and end.

cross start and cross end rely on the definition of the start or before position that depends on the value of direction.

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

Browser compatibility

{{ CompatibilityTable() }}

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support {{ CompatUnknown() }} 21.0{{ property_prefix("-webkit") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

 

Fonte da revisão

<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 design de user interface. 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, Gecko, Opera e Webkit, respectivamente.</div>
<p>Veja <a href="/en/CSS/Flexbox" title="/en/CSS/Flexbox">Flexbox</a> para uma introdução à API.</p>
<h2 id="Flexible_boxes_concept">Conceito de Caixas Flexíveis</h2>
<p>O algoritmo de layout flexbox é agonó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. Both are part of a wider effort with CSS3 to provide for greater interoperability of web applications with different user agents, different writing modes, and other demands on flexibility.</p>
<h2 id="Flexible_boxes_vocabulary">Flexible boxes vocabulary</h2>
<p>While a discussion of flexible boxes is liberated from terms like&nbsp;horizontal/in-line axis and vertical/block axis, it requires a new terminology to properly describe the model. Consider the following diagram when reviewing the vocabulary items below. It shows a flex container that has a <code>flex-direction</code> of <code>row</code>, meaning that the flex items follow each other horizontally across the main axis according to the established writing mode, the direction in which the element's text flows, in this case left-to-right.</p>
<p><img alt="flex_terms.png" class="internal default" src="/files/3739/flex_terms.png" /></p>
<dl>
  <dt>
    Flex container</dt>
  <dd>
    The parent element in which flex items are contained. A flex container is defined using the&nbsp;<code>flex</code>&nbsp;or&nbsp;<code>inline-flex</code>&nbsp;values of the&nbsp;<a href="/en/CSS/display" rel="internal" title="display"><code>display</code></a>&nbsp;property.</dd>
  <dt>
    Flex item</dt>
  <dd>
    <p>Each child of a flex container becomes a flex item. Text directly contained in a flex container is wrapped in an anonymous flex item.</p>
    <div class="note">
      <strong>Note: </strong>If the anonymous block contains solely inline containing whitespaces, the box would not be generated as if it had <code>display:none</code>.</div>
    <div class="note">
      <strong>Note:</strong> Absolutely positioned children of a flex container are positionned so that their static position is determined in reference to the head start content-box corner of their flex container.</div>
  </dd>
  <dt>
    Axes</dt>
  <dd>
    <p>Every flexible box layout follows two axes. The <strong>main axis</strong> is the axis along which the flex items follow each other. The&nbsp;<strong>cross axis</strong> is the axis perpendicular to the <strong>main axis</strong>.</p>
    <ul>
      <li>The&nbsp;<code><a href="/en/CSS/flex-direction" rel="internal" title="flex-direction">flex-direction</a></code>&nbsp;property establishes the main axis.</li>
      <li>The&nbsp;<a href="/en/CSS/justify-content" rel="internal" title="en/CSS/justify-content"><code>justify-content</code></a>&nbsp;property defines how flex items are laid out along the&nbsp;main axis&nbsp;on the current line.</li>
      <li>The&nbsp;<a href="/en/CSS/align-items" title="en/CSS/align-items"><code>align-items</code></a>&nbsp;property&nbsp;defines the default for how flex items are laid out along the&nbsp;cross axis&nbsp;on the current line.</li>
      <li>The&nbsp;<a href="/en/CSS/align-self" title="en/CSS/align-self"><code>align-self</code></a>&nbsp;property defines how a single flex item is aligned on the&nbsp;cross axis, and overrides the default established by&nbsp;<code>align-items.</code></li>
    </ul>
  </dd>
  <dt>
    Directions</dt>
  <dd>
    <p>The <strong>main start</strong>/<strong>main end </strong>and&nbsp;<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&nbsp;main axis&nbsp;and&nbsp;cross axis&nbsp;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&nbsp;<a href="/en/CSS/order" rel="internal" title="en/CSS/order"><code>order</code></a>&nbsp;property assigns elements to ordinal groups and determines which elements appear first.</li>
      <li>The&nbsp;<a href="/en/CSS/flex-flow" rel="internal" title="flex-flow"><code>flex-flow</code></a>&nbsp;property shorthands the&nbsp;<a href="/en/CSS/flex-direction" rel="internal" title="flex-direction"><code>flex-direction</code></a>&nbsp;and&nbsp;<a href="/en/CSS/flex-wrap" rel="internal" title="flex-wrap"><code>flex-wrap</code></a>&nbsp;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&nbsp;<a href="/en/CSS/flex-wrap" rel="internal" title="flex-wrap"><code>flex-wrap</code></a>&nbsp;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&nbsp;<strong>main size</strong>&nbsp;and&nbsp;<strong>cross size,</strong>&nbsp;which respectively follow the&nbsp;main axis&nbsp;and&nbsp;cross axis&nbsp;of the flex container.</p>
    <ul>
      <li>The&nbsp;<code><a href="/en/CSS/min-height" title="/en/CSS/min-height">min-height</a></code>&nbsp;and&nbsp;<code><a href="/en/CSS/min-width" title="/en/CSS/min-width">min-width</a></code>&nbsp;properties have a new value,&nbsp;<code>auto</code>&nbsp;that establishes the minimum size of a flex item.</li>
      <li>The&nbsp;<a href="/en/CSS/flex" rel="internal" title="en/CSS/flex"><code>flex</code></a>&nbsp;property shorthands the&nbsp;<code><a href="/en/CSS/flex-basis" rel="internal" title="en/CSS/flex-basis">flex-basis</a></code>,&nbsp;<a href="/en/CSS/flex-grow" rel="internal" title="en/CSS/flex-grow"><code>flex-grow</code></a>, and&nbsp;<a href="/en/CSS/flex-shrink" rel="internal" title="en/CSS/flex-shrink"><code>flex-shrink</code></a>&nbsp;properties to establish the flexibility of the flex items.</li>
    </ul>
  </dd>
</dl>
<h2 id="Designating_a_flexible_box">Designating a flexible box</h2>
<p>To designate the CSS for elements using this style, set&nbsp;the&nbsp;<a href="/en/CSS/display" title="/en/CSS/display">display</a>&nbsp;property as follows:</p>
<pre>
display :  flex</pre>
<p>or</p>
<pre>
display : inline-flex</pre>
<p>Doing so defines the element as a flex container and its children as flex items.&nbsp;The&nbsp;<code>flex</code>&nbsp;value makes the flex container a block-level element. The&nbsp;<code>inline-flex</code>&nbsp;value makes the flex container an atomic inline-level element.</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,&nbsp;<code>display : -webkit-flex</code>.</div>
<h2 id="Flexible_box_properties">Flexible box properties</h2>
<p><span id="cke_bm_69S" style="">&nbsp;</span>{{ page("/en-US/docs/CSS/Flexbox", "flex- properties") }}<span id="cke_bm_69E" style="">&nbsp;</span></p>
<dl>
</dl>
<h3 id="Properties_not_affecting_flexible_boxes">Properties not affecting flexible boxes</h3>
<p>Since flexible boxes uses a different layout algorithm, some properties do not make sense on a flex container.</p>
<ul>
  <li>column-* properties of the&nbsp;<a href="/en/CSS/Using_CSS_multi-column_layouts" title="Using CSS multi-column layouts">Multicol module</a>&nbsp;have no effect on a flex.</li>
  <li><a href="/en/CSS/float" title="float"><code>float</code></a>&nbsp;and&nbsp;<a href="/en/CSS/clear" title="clear"><code>clear</code></a>&nbsp;have no effect on a flex item. Using&nbsp;<code>float</code>&nbsp;cause the&nbsp;<code>display</code>&nbsp;property of the element to compute to&nbsp;<code>block</code>.</li>
  <li><a href="/en/CSS/vertical-align" title="vertical-align"><code>vertical-align</code></a>&nbsp;has no effect on the alignment of flex items.</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.&nbsp;</p>
<pre>
​&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&nbsp; &lt;head&gt;
&nbsp;&nbsp;&nbsp; &lt;style&gt;

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

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

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

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

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

&nbsp;&nbsp;&nbsp;.flex &gt; div:hover
&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 200px;
&nbsp;&nbsp; }
&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&lt;/style&gt;
&nbsp;&nbsp;&nbsp; 
&nbsp;&lt;/head&gt;
&nbsp;&lt;body&gt;
  &lt;p&gt;Flexbox nuovo&lt;/p&gt;
  &lt;div class="flex"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;uno&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;due&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;tre&lt;/div&gt;
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&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="internal default" 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;
&nbsp; &lt;head&gt;
&nbsp;&nbsp;&nbsp; &lt;style&gt;

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

&nbsp; #main {
&nbsp;&nbsp; min-height: 800px;
&nbsp;&nbsp; margin: 0px;
&nbsp;&nbsp; padding: 0px;
&nbsp;&nbsp; display: -webkit-flex;
&nbsp;&nbsp; -webkit-flex-flow: row;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flex-flow: row;
&nbsp;&nbsp; }
&nbsp;
&nbsp; #main &gt; article {
&nbsp;&nbsp; margin: 4px;
&nbsp;&nbsp; padding: 5px;
&nbsp;&nbsp; border: 1px solid #cccc33;
&nbsp;&nbsp; border-radius: 7pt;
&nbsp;&nbsp; background: #dddd88;
&nbsp;&nbsp; -webkit-flex: 3 1 60%;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flex: 3 1 60%;
&nbsp;&nbsp; -webkit-order: 2;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;order: 2;
&nbsp;&nbsp; }
&nbsp;&nbsp;
&nbsp; #main &gt; nav {
&nbsp;&nbsp; margin: 4px;
&nbsp;&nbsp; padding: 5px;
&nbsp;&nbsp; border: 1px solid #8888bb;
&nbsp;&nbsp; border-radius: 7pt;
&nbsp;&nbsp; background: #ccccff;
&nbsp;&nbsp; -webkit-flex: 1 6 20%;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flex: 1 6 20%;
&nbsp;&nbsp; -webkit-order: 1;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;order: 1;
&nbsp;&nbsp; }
&nbsp;&nbsp;
&nbsp; #main &gt; aside {
&nbsp;&nbsp; margin: 4px;
&nbsp;&nbsp; padding: 5px;
&nbsp;&nbsp; border: 1px solid #8888bb;
&nbsp;&nbsp; border-radius: 7pt;
&nbsp;&nbsp; background: #ccccff;
&nbsp;&nbsp; -webkit-flex: 1 6 20%;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flex: 1 6 20%;
&nbsp;&nbsp; -webkit-order: 3;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;order: 3;
&nbsp;&nbsp; }
&nbsp;
&nbsp; header, footer {
&nbsp;&nbsp; display: block;
&nbsp;&nbsp; margin: 4px;
&nbsp;&nbsp; padding: 5px;
&nbsp;&nbsp; min-height: 100px;
&nbsp;&nbsp; border: 1px solid #eebb55;
&nbsp;&nbsp; border-radius: 7pt;
&nbsp;&nbsp; background: #ffeebb;
&nbsp;&nbsp; }
&nbsp;
&nbsp; /* Too narrow to support three columns */
&nbsp; @media all and (max-width: 640px) {
&nbsp;&nbsp;
&nbsp;&nbsp; #main, #page {
&nbsp;&nbsp;&nbsp; -webkit-flex-flow: column;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flex-flow: column;
&nbsp;&nbsp; }

&nbsp;&nbsp; #main &gt; article, #main &gt; nav, #main &gt; aside {
&nbsp;&nbsp;&nbsp; /* Return them to document order */
&nbsp;&nbsp;&nbsp; -webkit-order: 0;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;order: 0;
&nbsp;&nbsp; }
&nbsp;&nbsp;
&nbsp;&nbsp; #main &gt; nav, #main &gt; aside, header, footer {
&nbsp;&nbsp;&nbsp; min-height: 50px;
&nbsp;&nbsp;&nbsp; max-height: 50px;
&nbsp;&nbsp; }
&nbsp; }

 &lt;/style&gt;
&nbsp; &lt;/head&gt;
&nbsp; &lt;body&gt;
 &lt;header&gt;header&lt;/header&gt;
 &lt;div id='main'&gt;
&nbsp;&nbsp;&nbsp; &lt;article&gt;article&lt;/article&gt;
&nbsp;&nbsp;&nbsp; &lt;nav&gt;nav&lt;/nav&gt;
&nbsp;&nbsp;&nbsp; &lt;aside&gt;aside&lt;/aside&gt;
 &lt;/div&gt;
 &lt;footer&gt;footer&lt;/footer&gt;
&nbsp; &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&nbsp;&nbsp; <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&nbsp;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>
<p>&nbsp;</p>
Reverter para esta revisão