Compare Revisions

flex

Revision 474115:

Revision 474115 by teoli on

Revision 474365:

Revision 474365 by JDBurnZ on

Title:
flex
flex
Slug:
Web/CSS/flex
Web/CSS/flex
Tags:
"Fixit","CSS","CSS Reference","CSS Flexible Boxes"
"Fixit","CSS","CSS Flexible Boxes","CSS Reference","CSS Référence"
Content:

Revision 474115
Revision 474365
t88    <pre>t88    <pre class="brush: html">
89{{todo}}89&lt;style type="text/css"&gt;
90  #flex-container {
91    width:100%;
92 
93    /* flexbox specific properties */
94<code class="language-html"><span class="token style"><span class
 >="token comment" spellcheck="true">/* flexbox setup */</span>    
 ><span class="token property">display</span><span class="token pun
 >ctuation">:</span> -webkit-flex<span class="token punctuation">;<
 >/span></span></code><code class="language-html"><span class="toke
 >n style">
95</span></code><code class="language-html"><span class="token styl
 >e">    </span></code><code class="language-html"><span class="tok
 >en style"><span class="token property">display</span><span class=
 >"token punctuation">:</span> flex<span class="token punctuation">
 >;</span></span></code>
96<code class="language-html"><span class="token style">    </span>
 ></code><code class="language-html"><span class="token style"><spa
 >n class="token property">-webkit-flex-direction</span><span class
 >="token punctuation">:</span> row<span class="token punctuation">
 >;</span></span></code><code class="language-html"><span class="to
 >ken style">
97</span></code><code class="language-html"><span class="token styl
 >e">    </span></code><code class="language-html"><span class="tok
 >en style"><span class="token property">flex-direction</span><span
 > class="token punctuation">:</span> row<span class="token punctua
 >tion">;</span></span></code>
98  }
99  #flex-container .flex-item {
100    border:1px solid #f00;
101 
102    /* flexbox specific properties */
103<code class="language-html"><span class="token style">    <span c
 >lass="token property">-webkit-flex</span><span class="token punct
 >uation">:</span> auto<span class="token punctuation">;</span>
104    <span class="token property">flex</span><span class="token pu
 >nctuation">:</span> auto<span class="token punctuation">;</span><
 >/span></code>
105  }
106&lt;/style&gt;
107 
108&lt;div id="flex-container"&gt;
109  &lt;div class="flex-item"&gt;Flex Box 1&lt;/div&gt;
110  &lt;div class="flex-item"&gt;Flex Box 2&lt;/div&gt;
111&lt;/div&gt;
112 
113{{todo}}: Improve on these examples.

Back to History