forked from jgthms/css-reference
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathflexbox.html
More file actions
1 lines (1 loc) · 55.9 KB
/
Copy pathflexbox.html
File metadata and controls
1 lines (1 loc) · 55.9 KB
1
<section id="align-content" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/flexbox/">In collection: <strong>flexbox</strong> </a><a class="property-links-direct" href="{{site.url}}/property/align-content/" data-property-name="align-content" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="align-content">Share</a> <a target="_blank" href="http://caniuse.com/#feat=flexbox" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/align-content" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#align-content"><span>#</span>align-content</a></h2><div class="property-description"><p>Defines how each line is aligned within a flexbox/grid container. It only applies if <code>flex-wrap: wrap</code> is present, and if there are <strong>multiple lines</strong> of flexbox/grid items.</p></div></header><style type="text/css">.align-content { background: hsl(0, 0%, 95%);display: flex;flex-wrap: wrap;height: 300px;padding: 0; }</style><style type="text/css">.align-content .square { height: 46px;margin: 2px;width: 30%; }.align-content .square:nth-child(2) { height: 96px; }.align-content .box { height: 150px;left: 0;position: absolute;right: 0;top: 0; }.align-content .box--red:before { content: "First line"; }.align-content .box--green { top: 150px; }.align-content .box--green:before { content: "Second line"; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-content: stretch;">align-content: stretch;</code></p><div class="example-description"><p>Each line will stretch to <em>fill</em> the remaining space.</p><p>In this case, the container is <code>300px</code> high. All boxes are <code>50px</code> high, apart from the second one who is <code>100px</code> high.</p><ul><li>The first line is <strong>100px</strong> high</li><li>The second line is <strong>50px</strong> high</li><li>The remaing space is <strong>150px</strong></li></ul><p>This remaining space is distributed equally amongst the two lines:</p><ul><li>The first line is now <strong>175px</strong> high</li><li>The second line is now <strong>125px</strong> high</li></ul></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div align-content" id="align-content-stretch"><p class="square square--plum">1</p><p class="square square--plum">2</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="box box--red"></div><div class="box box--green"></div></div></div></aside><style type="text/css">#align-content-stretch{ align-content:stretch;}</style><style type="text/css">#align-content-stretch .box--red { height: 175px; }#align-content-stretch .box--green { height: 125px;top: 175px; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-content: flex-start;">align-content: flex-start;</code></p><div class="example-description"><p>Each line will only fill the space it <em>needs</em>. They will all move towards the <strong>start</strong> of the flexbox/grid container's cross axis.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div align-content" id="align-content-flex-start"><p class="square square--plum">1</p><p class="square square--plum">2</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="box box--red"></div><div class="box box--green"></div></div></div></aside><style type="text/css">#align-content-flex-start{ align-content:flex-start;}</style><style type="text/css">#align-content-flex-start .box--red { height: 100px; }#align-content-flex-start .box--green { height: 50px;top: 100px; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-content: flex-end;">align-content: flex-end;</code></p><div class="example-description"><p>Each line will only fill the space it <em>needs</em>. They will all move towards the <strong>end</strong> of the flexbox/grid container's cross axis.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div align-content" id="align-content-flex-end"><p class="square square--plum">1</p><p class="square square--plum">2</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="box box--red"></div><div class="box box--green"></div></div></div></aside><style type="text/css">#align-content-flex-end{ align-content:flex-end;}</style><style type="text/css">#align-content-flex-end .box--red { height: 100px;top: 150px; }#align-content-flex-end .box--green { height: 50px;top: 250px; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-content: center;">align-content: center;</code></p><div class="example-description"><p>Each line will only fill the space it <em>needs</em>. They will all move towards the <strong>center</strong> of the flexbox/grid container's cross axis.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div align-content" id="align-content-center"><p class="square square--plum">1</p><p class="square square--plum">2</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="box box--red"></div><div class="box box--green"></div></div></div></aside><style type="text/css">#align-content-center{ align-content:center;}</style><style type="text/css">#align-content-center .box--red { height: 100px;top: 75px; }#align-content-center .box--green { height: 50px;top: 175px; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-content: space-between;">align-content: space-between;</code></p><div class="example-description"><p>Each line will only fill the space it <em>needs</em>. The <em>remaining</em> space will appear <strong>between</strong> the lines.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div align-content" id="align-content-space-between"><p class="square square--plum">1</p><p class="square square--plum">2</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="box box--red"></div><div class="box box--green"></div></div></div></aside><style type="text/css">#align-content-space-between{ align-content:space-between;}</style><style type="text/css">#align-content-space-between .box--red { height: 100px;top: 0; }#align-content-space-between .box--green { height: 50px;top: 250px; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-content: space-around;">align-content: space-around;</code></p><div class="example-description"><p>Each line will only fill the space it <em>needs</em>. The <em>remaining</em> space will be distributed equally <strong>around</strong> the lines: before the first line, between the two, and after the last one.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div align-content" id="align-content-space-around"><p class="square square--plum">1</p><p class="square square--plum">2</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="box box--red"></div><div class="box box--green"></div></div></div></aside><style type="text/css">#align-content-space-around{ align-content:space-around;}</style><style type="text/css">#align-content-space-around .box--red { height: 100px;top: 38px; }#align-content-space-around .box--green { height: 50px;top: 213px; }</style></section></section><section id="align-items" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/flexbox/">In collection: <strong>flexbox</strong> </a><a class="property-links-direct" href="{{site.url}}/property/align-items/" data-property-name="align-items" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="align-items">Share</a> <a target="_blank" href="http://caniuse.com/#feat=flexbox" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/align-items" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#align-items"><span>#</span>align-items</a></h2><div class="property-description"><p>Defines how flexbox items are aligned according to the <strong>cross</strong> axis, within a line of a flexbox container.</p></div></header><style type="text/css">.align-items { background: hsl(0, 0%, 95%);display: flex;height: 200px;justify-content: center;padding: 0; }</style><style type="text/css">.align-items .square { height: 50px;margin: 0 2px;width: calc(20% - 4px); }.align-items .square:nth-child(2) { height: 100px; }.align-items .square:nth-child(4) { height: 75px; }.align-items .line { left: 2px;position: absolute;right: 2px; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: flex-start;">align-items: flex-start;</code></p><div class="example-description"><p>The flexbox items are aligned at the <strong>start</strong> of the <strong>cross axis</strong>.</p><p>By default, the cross axis is vertical. This means the flexbox items will be aligned <em>vertically</em> at the <em>top</em>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div align-items" id="align-items-flex-start"><p class="square square--plum">1</p><p class="square square--plum">2</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="line line--red"></div></div></div></aside><style type="text/css">#align-items-flex-start{ align-items:flex-start;}</style><style type="text/css">#align-items-flex-start .line { top: 0; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: flex-end;">align-items: flex-end;</code></p><div class="example-description"><p>The flexbox items are aligned at the <strong>end</strong> of the <strong>cross axis</strong>.</p><p>By default, the cross axis is vertical. This means the flexbox items will be aligned <em>vertically</em> at the <em>bottom</em>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div align-items" id="align-items-flex-end"><p class="square square--plum">1</p><p class="square square--plum">2</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="line line--red"></div></div></div></aside><style type="text/css">#align-items-flex-end{ align-items:flex-end;}</style><style type="text/css">#align-items-flex-end .line { bottom: 0; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: center;">align-items: center;</code></p><div class="example-description"><p>The flexbox items are aligned at the <strong>center</strong> of the <strong>cross axis</strong>.</p><p>By default, the cross axis is vertical. This means the flexbox items will be <strong>centered</strong> <em>vertically</em>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div align-items" id="align-items-center"><p class="square square--plum">1</p><p class="square square--plum">2</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="line line--red"></div></div></div></aside><style type="text/css">#align-items-center{ align-items:center;}</style><style type="text/css">#align-items-center .line { top: 50%; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: baseline;">align-items: baseline;</code></p><div class="example-description"><p>The flexbox items are aligned at the <strong>baseline</strong> of the <strong>cross axis</strong>.</p><p>By default, the cross axis is vertical. This means the flexbox items will align themselves in order to have the <em>baseline</em> of their <em>text</em> align along a horizontal line.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div align-items" id="align-items-baseline"><p class="square square--plum">1</p><p class="square square--plum">2</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="line line--red"></div></div></div></aside><style type="text/css">#align-items-baseline{ align-items:baseline;}</style><style type="text/css">#align-items-baseline .line { top: 55px; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: stretch;">align-items: stretch;</code></p><div class="example-description"><p>The flexbox items will stretch across the whole <strong>cross axis</strong>.</p><p>By default, the cross axis is vertical. This means the flexbox items will fill up the whole vertical space.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div align-items" id="align-items-stretch"><p class="square square--plum">1</p><p class="square square--plum">2</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="line line--red"></div></div></div></aside><style type="text/css">#align-items-stretch{ align-items:stretch;}</style><style type="text/css">#align-items-stretch .square { height: auto; }#align-items-stretch .square:nth-child(2) { height: auto; }#align-items-stretch .square:nth-child(4) { height: auto; }#align-items-stretch .line { display: none; }</style></section></section><section id="align-self" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/flexbox/">In collection: <strong>flexbox</strong> </a><a class="property-links-direct" href="{{site.url}}/property/align-self/" data-property-name="align-self" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="align-self">Share</a> <a target="_blank" href="http://caniuse.com/#feat=flexbox" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/align-self" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#align-self"><span>#</span>align-self</a></h2><div class="property-description"><p>Works like <code>align-items</code>, but applies only to a <strong>single</strong> flexbox item, instead of <em>all</em> of them.</p></div></header><style type="text/css">.align-self { align-items: center;background: hsl(0, 0%, 95%);display: flex;height: 200px;justify-content: center;padding: 0; }</style><style type="text/css">.align-self .square { height: 50px;margin: 0 2px;width: calc(20% - 4px); }.align-self .square:nth-child(2) { background: #05ffb0;color: #310736; }.align-self .square:nth-child(4) { height: 75px; }.align-self .line { left: 2px;position: absolute;right: 2px; }.align-self .line--default { top: 50%; }.align-self .line--default:before { content: "Items"; }.align-self .line--red:before { content: "Self"; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-self: auto;">align-self: auto;</code></p><div class="example-description"><p>The target will use the value of <code>align-items</code>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div align-self" id="align-self-auto"><p class="square square--plum">1</p><p class="square target">Target</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5
10B14
</p><div class="line line--default"></div><div class="line line--red"></div></div></div></aside><style type="text/css">#align-self-auto{ align-self:auto;}</style><style type="text/css">#align-self-auto .target { align-self: auto; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-self: flex-start;">align-self: flex-start;</code></p><div class="example-description"><p>If the container has <code>align-items: center</code> and the <strong>target</strong> has <code>align-self: flex-start</code>, only the target will be at the start of the cross axis.</p><p>By default, this means it will be aligned <strong>vertically</strong> at the <strong>top</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div align-self" id="align-self-flex-start"><p class="square square--plum">1</p><p class="square target">Target</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="line line--default"></div><div class="line line--red"></div></div></div></aside><style type="text/css">#align-self-flex-start{ align-self:flex-start;}</style><style type="text/css">#align-self-flex-start .target { align-self: flex-start; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-self: flex-end;">align-self: flex-end;</code></p><div class="example-description"><p>If the container has <code>align-items: center</code> and the <strong>target</strong> has <code>align-self: flex-end</code>, only the target will be at the end of the cross axis.</p><p>By default, this means it will be aligned <strong>vertically</strong> at the <strong>bottom</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div align-self" id="align-self-flex-end"><p class="square square--plum">1</p><p class="square target">Target</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="line line--default"></div><div class="line line--red"></div></div></div></aside><style type="text/css">#align-self-flex-end{ align-self:flex-end;}</style><style type="text/css">#align-self-flex-end .line--red { bottom: 0; }#align-self-flex-end .target { align-self: flex-end; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-self: center;">align-self: center;</code></p><div class="example-description"><p>If the container has <code>align-items: flex-start</code> and the <strong>target</strong> has <code>align-self: center</code>, only the target will be at the center of the cross axis.</p><p>By default, this means it will be <strong>vertically centered</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div align-self" id="align-self-center"><p class="square square--plum">1</p><p class="square target">Target</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="line line--default"></div><div class="line line--red"></div></div></div></aside><style type="text/css">#align-self-center{ align-self:center;}</style><style type="text/css">#align-self-center{ align-items: flex-start; }</style><style type="text/css">#align-self-center .line--default { top: 0; }#align-self-center .line--red { top: 50%; }#align-self-center .target { align-self: center; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-self: baseline;">align-self: baseline;</code></p><div class="example-description"><p>If the container has <code>align-items: center</code> and the <strong>target</strong> has <code>align-self: baseline</code>, only the target will be at the baseline of the cross axis.</p><p>By default, this means it will be aligned along the basline of the text.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div align-self" id="align-self-baseline"><p class="square square--plum">1</p><p class="square target">Target</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="line line--default"></div><div class="line line--red"></div></div></div></aside><style type="text/css">#align-self-baseline{ align-self:baseline;}</style><style type="text/css">#align-self-baseline .line--default { top: 50%; }#align-self-baseline .line--red { top: 30px; }#align-self-baseline .target { align-self: baseline; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-self: stretch;">align-self: stretch;</code></p><div class="example-description"><p>If the container has <code>align-items: center</code> and the <strong>target</strong> has <code>align-self: stretch</code>, only the target will stretch along the whole cross axis.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div align-self" id="align-self-stretch"><p class="square square--plum">1</p><p class="square target">Target</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="line line--default"></div><div class="line line--red"></div></div></div></aside><style type="text/css">#align-self-stretch{ align-self:stretch;}</style><style type="text/css">#align-self-stretch .line--default { top: 50%; }#align-self-stretch .line--red { display: none; }#align-self-stretch .target { align-self: stretch;height: auto; }</style></section></section><section id="flex-basis" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/flexbox/">In collection: <strong>flexbox</strong> </a><a class="property-links-direct" href="{{site.url}}/property/flex-basis/" data-property-name="flex-basis" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="flex-basis">Share</a> <a target="_blank" href="http://caniuse.com/#feat=flexbox" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/flex-basis" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#flex-basis"><span>#</span>flex-basis</a></h2><div class="property-description"><p>Defines the initial size of a flexbox item.</p></div></header><style type="text/css">.flex-basis { background: hsl(0, 0%, 95%);display: flex;padding: 1em;word-break: break-all; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="flex-basis: auto;">flex-basis: auto;</code></p><div class="example-description"><p>The element will be automatically sized based on its content, or on any <code>height</code> or <code>width</code> value if they are defined.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div flex-basis" id="flex-basis-auto"><p class="block block--alpha">Flexbox item</p></div></div></aside><style type="text/css">#flex-basis-auto{ flex-basis:auto;}</style><style type="text/css">#flex-basis-auto .block { flex-basis: auto; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="flex-basis: 80px;">flex-basis: 80px;</code></p><div class="example-description"><p>You can define <strong>pixel</strong> or <strong>(r)em</strong> values. The element will wrap its content to avoid any overflow.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div flex-basis" id="flex-basis-80px"><p class="block block--alpha">Flexbox item</p></div></div></aside><style type="text/css">#flex-basis-80px{ flex-basis:80px;}</style><style type="text/css">#flex-basis-80px .block { flex-basis: 80px; }</style></section></section><section id="flex-direction" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/flexbox/">In collection: <strong>flexbox</strong> </a><a class="property-links-direct" href="{{site.url}}/property/flex-direction/" data-property-name="flex-direction" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="flex-direction">Share</a> <a target="_blank" href="http://caniuse.com/#feat=flexbox" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/flex-direction" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#flex-direction"><span>#</span>flex-direction</a></h2><div class="property-description"><p>Defines how flexbox items are ordered within a flexbox container.</p></div></header><style type="text/css">.flex-direction { display: flex; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="flex-direction: row;">flex-direction: row;</code></p><div class="example-description"><p>The flexbox items are ordered the <strong>same</strong> way as the <strong>text direction</strong>, along the <strong>main axis</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div flex-direction" id="flex-direction-row"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p><p class="block block--yellow"><strong>4.</strong> Four</p></div></div></aside><style type="text/css">#flex-direction-row{ flex-direction:row;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="flex-direction: row-reverse;">flex-direction: row-reverse;</code></p><div class="example-description"><p>The flexbox items are ordered the <strong>opposite</strong> way as the <strong>text direction</strong>, along the <strong>main axis</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div flex-direction" id="flex-direction-row-reverse"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p><p class="block block--yellow"><strong>4.</strong> Four</p></div></div></aside><style type="text/css">#flex-direction-row-reverse{ flex-direction:row-reverse;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="flex-direction: column;">flex-direction: column;</code></p><div class="example-description"><p>The flexbox items are ordered the <strong>same</strong> way as the <strong>text direction</strong>, along the <strong>cross axis</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div flex-direction" id="flex-direction-column"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p><p class="block block--yellow"><strong>4.</strong> Four</p></div></div></aside><style type="text/css">#flex-direction-column{ flex-direction:column;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="flex-direction: column-reverse;">flex-direction: column-reverse;</code></p><div class="example-description"><p>The flexbox items are ordered the <strong>opposite</strong> way as the <strong>text direction</strong>, along the <strong>cross axis</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div flex-direction" id="flex-direction-column-reverse"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p><p class="block block--yellow"><strong>4.</strong> Four</p></div></div></aside><style type="text/css">#flex-direction-column-reverse{ flex-direction:column-reverse;}</style></section></section><section id="flex-flow" class="property property--shorthand"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/flexbox/">In collection: <strong>flexbox</strong> </a><a class="property-links-direct" href="{{site.url}}/property/flex-flow/" data-property-name="flex-flow" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="flex-flow">Share</a> <a target="_blank" href="http://caniuse.com/#feat=flexbox" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/flex-flow" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#flex-flow"><span>#</span>flex-flow</a></h2><div class="property-description"><p>Shorthand property for <code class="shorthand"><a class="hash" href="{{site.url}}/property/flex-direction" data-property-name="flex-direction">flex-direction</a></code> and <code class="shorthand"><a class="hash" href="{{site.url}}/property/flex-wrap" data-property-name="flex-wrap">flex-wrap</a></code>.</p></div></header></section><section id="flex-grow" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/flexbox/">In collection: <strong>flexbox</strong> </a><a class="property-links-direct" href="{{site.url}}/property/flex-grow/" data-property-name="flex-grow" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="flex-grow">Share</a> <a target="_blank" href="http://caniuse.com/#feat=flexbox" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/flex-grow" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#flex-grow"><span>#</span>flex-grow</a></h2><div class="property-description"><p>Defines how much a flexbox item should <strong>grow</strong> if there's space available.</p></div></header><style type="text/css">.flex-grow { background: #310736;border-radius: 3px;display: flex;padding: 1em; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="flex-grow: 0;">flex-grow: 0;</code></p><div class="example-description"><p>The element will <strong>not</strong> grow if there's space available. It will only use the space it needs.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div flex-grow" id="flex-grow-0"><p class="block block--alpha"><strong>Target</strong></p><p class="block block--pink">Item</p><p class="block block--yellow">Item</p></div></div></aside><style type="text/css">#flex-grow-0{ flex-grow:0;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="flex-grow: 1;">flex-grow: 1;</code></p><div class="example-description"><p>The element will <strong>grow</strong> by a factor of <strong>1</strong>. It will fill up the remaining space if no other flexbox item has a <code>flex-grow</code> value.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div flex-grow" id="flex-grow-1"><p class="block block--alpha"><strong>Target</strong></p><p class="block block--pink">Item</p><p class="block block--yellow">Item</p></div></div></aside><style type="text/css">#flex-grow-1{ flex-grow:1;}</style><style type="text/css">#flex-grow-1 .block--alpha { flex-grow: 1; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="flex-grow: 2;">flex-grow: 2;</code></p><div class="example-description"><p>Because the flex-grow value is <strong>relative</strong>, its behaviour depends on the value of the flexbox item <strong>siblings</strong>.</p><p>In this example, the remaining space is divided in <strong>3</strong>:</p><ul><li><strong>1</strong> third goes to the <strong>green</strong> item</li><li><strong>2</strong> thirds go to the <strong>pink</strong> item</li><li>Nothing goes to the <strong>yellow</strong> item, who retains its initial width</li></ul></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div flex-grow" id="flex-grow-2"><p class="block block--alpha">Item<br><strong>1</strong></p><p class="block block--pink">Item<br><strong>2</strong></p><p class="block block--yellow">Item<br><strong>0</strong></p></div></div></aside><style type="text/css">#flex-grow-2{ flex-grow:2;}</style><style type="text/css">#flex-grow-2 .block--alpha { flex-grow: 1; }#flex-grow-2 .block--pink { flex-grow: 2; }</style></section></section><section id="flex-shrink" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/flexbox/">In collection: <strong>flexbox</strong> </a><a class="property-links-direct" href="{{site.url}}/property/flex-shrink/" data-property-name="flex-shrink" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="flex-shrink">Share</a> <a target="_blank" href="http://caniuse.com/#feat=flexbox" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/flex-shrink" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#flex-shrink"><span>#</span>flex-shrink</a></h2><div class="property-description"><p>Defines how much a flexbox item should <strong>shrink</strong> if there's <strong>not enough</strong> space available.</p></div></header><style type="text/css">.flex-shrink { background: #310736;border-radius: 3px;display: flex;padding: 1em;width: 300px; }</style><style type="text/css">.flex-shrink .block { flex-shrink: 1; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="flex-shrink: 1;">flex-shrink: 1;</code></p><div class="example-description"><p>If there's <strong>not enough</strong> space available in the container's main axis, the element will <strong>shrink</strong> by a factor of <strong>1</strong>, and will wrap its content.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div flex-shrink" id="flex-shrink-1"><p class="block block--alpha"><strong>This is the flex-shrink target</strong></p><p class="block block--pink">Foo bar</p><p class="block block--yellow">Lorem ipsum</p></div></div></aside><style type="text/css">#flex-shrink-1{ flex-shrink:1;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="flex-shrink: 0;">flex-shrink: 0;</code></p><div class="example-description"><p>The element will <strong>not</strong> shrink: it will retain the width it needs, and <strong>not</strong> wrap its content. Its siblings will shrink to give space to the target element.</p><p>Because the target element will not wrap its content, there is a chance for the flexbox container's content to <strong>overflow</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div flex-shrink" id="flex-shrink-0"><p class="block block--alpha"><strong>This is the flex-shrink target</strong></p><p class="block block--pink">Foo bar</p><p class="block block--yellow">Lorem ipsum</p></div></div></aside><style type="text/css">#flex-shrink-0{ flex-shrink:0;}</style><style type="text/css">#flex-shrink-0 .block--alpha { flex-shrink: 0; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="flex-shrink: 2;">flex-shrink: 2;</code></p><div class="example-description"><p>Because the flex-shrink value is <strong>relative</strong>, its behaviour depends on the value of the flexbox item <strong>siblings</strong>.</p><p>In this example, the green item wants to fill 100% of the width. The space it needs is <strong>taken from</strong> its two siblings, and is divided in <strong>4</strong>:</p><ul><li><strong>3</strong> quarters are taken from the <strong>red</strong> item</li><li><strong>1</strong> quarter is taken from the <strong>yellow</strong> item</li></ul></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div flex-shrink" id="flex-shrink-2"><p class="block block--alpha">Width<br><strong>100%</strong></p><p class="block block--pink">Shrink<br><strong>3</strong></p><p class="block block--yellow">Shrink<br><strong>1</strong></p></div></div></aside><style type="text/css">#flex-shrink-2{ flex-shrink:2;}</style><style type="text/css">#flex-shrink-2 .block--alpha { flex-grow: 1;width: 100%; }#flex-shrink-2 .block--pink { flex-shrink: 3;word-break: break-all; }#flex-shrink-2 .block--yellow { flex-shrink: 1;word-break: break-all; }</style></section></section><section id="flex-wrap" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/flexbox/">In collection: <strong>flexbox</strong> </a><a class="property-links-direct" href="{{site.url}}/property/flex-wrap/" data-property-name="flex-wrap" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="flex-wrap">Share</a> <a target="_blank" href="http://caniuse.com/#feat=flexbox" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/flex-wrap" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#flex-wrap"><span>#</span>flex-wrap</a></h2><div class="property-description"><p>Defines if flexbox items appear on a <strong>single line</strong> or on <strong>multiple lines</strong> within a flexbox container.</p></div></header><style type="text/css">.flex-wrap { background: #310736;display: flex;max-width: 360px; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="flex-wrap: nowrap;">flex-wrap: nowrap;</code></p><div class="example-description"><p>The flexbox items will remain on a <strong>single line</strong>, no matter what, and will eventually overflow if needed.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div flex-wrap" id="flex-wrap-nowrap"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p><p class="block block--yellow"><strong>4.</strong> Four</p><p class="block block--orange"><strong>5.</strong> Five</p><p class="block block--purple"><strong>6.</strong> Six</p></div></div></aside><style type="text/css">#flex-wrap-nowrap{ flex-wrap:nowrap;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="flex-wrap: wrap;">flex-wrap: wrap;</code></p><div class="example-description"><p>The flexbox items will be distributed among <strong>multiple lines</strong> if needed.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div flex-wrap" id="flex-wrap-wrap"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p><p class="block block--yellow"><strong>4.</strong> Four</p><p class="block block--orange"><strong>5.</strong> Five</p><p class="block block--purple"><strong>6.</strong> Six</p></div></div></aside><style type="text/css">#flex-wrap-wrap{ flex-wrap:wrap;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="flex-wrap: wrap-reverse;">flex-wrap: wrap-reverse;</code></p><div class="example-description"><p>The flexbox items will be distributed among <strong>multiple lines</strong> if needed. Any additional line will appear <strong>before</strong> the previous one.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div flex-wrap" id="flex-wrap-wrap-reverse"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p><p class="block block--yellow"><strong>4.</strong> Four</p><p class="block block--orange"><strong>5.</strong> Five</p><p class="block block--purple"><strong>6.</strong> Six</p></div></div></aside><style type="text/css">#flex-wrap-wrap-reverse{ flex-wrap:wrap-reverse;}</style></section></section><section id="justify-content" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/flexbox/">In collection: <strong>flexbox</strong> </a><a class="property-links-direct" href="{{site.url}}/property/justify-content/" data-property-name="justify-content" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="justify-content">Share</a> <a target="_blank" href="http://caniuse.com/#feat=flexbox" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/justify-content" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#justify-content"><span>#</span>justify-content</a></h2><div class="property-description"><p>Defines how flexbox/grid items are aligned according to the <strong>main</strong> axis, within a flexbox/grid container.</p></div></header><style type="text/css">.justify-content { background: hsl(48, 100%, 67%);background: #310736;display: flex;padding: 0; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="justify-content: flex-start;">justify-content: flex-start;</code></p><div class="example-description"><p>The flexbox/grid items are pushed towards the <strong>start</strong> of the container's main axis.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div justify-content" id="justify-content-flex-start"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p></div></div></aside><style type="text/css">#justify-content-flex-start{ justify-content:flex-start;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="justify-content: flex-end;">justify-content: flex-end;</code></p><div class="example-description"><p>The flexbox/grid items are pushed towards the <strong>end</strong> of the container's main axis.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div justify-content" id="justify-content-flex-end"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p></div></div></aside><style type="text/css">#justify-content-flex-end{ justify-content:flex-end;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="justify-content: center;">justify-content: center;</code></p><div class="example-description"><p>The flexbox/grid items are <strong>centered</strong> along the container's main axis.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div justify-content" id="justify-content-center"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p></div></div></aside><style type="text/css">#justify-content-center{ justify-content:center;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="justify-content: space-between;">justify-content: space-between;</code></p><div class="example-description"><p>The remaining space is distributed <strong>between</strong> the flexbox/grid items.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div justify-content" id="justify-content-space-between"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p></div></div></aside><style type="text/css">#justify-content-space-between{ justify-content:space-between;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="justify-content: space-around;">justify-content: space-around;</code></p><div class="example-description"><p>The remaining space is distributed <strong>around</strong> the flexbox/grid items: this adds space <em>before</em> the first item and <em>after</em> the last one.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div justify-content" id="justify-content-space-around"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p></div></div></aside><style type="text/css">#justify-content-space-around{ justify-content:space-around;}</style></section></section><section id="order" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/flexbox/">In collection: <strong>flexbox</strong> </a><a class="property-links-direct" href="{{site.url}}/property/order/" data-property-name="order" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="order">Share</a> <a target="_blank" href="http://caniuse.com/#feat=flexbox" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/order" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#order"><span>#</span>order</a></h2><div class="property-description"><p>Defines the order of a flexbox item.</p></div></header><style type="text/css">.order { display: flex; }</style><style type="text/css">.order .block { flex-grow: 1;flex-shrink: 1; }.order em { font-style: normal; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="order: 0;">order: 0;</code></p><div class="example-description"><p>The order of the flexbox items is the one defined in the <strong>HTML code</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div order" id="order-0"><p class="block block--alpha">One<br><em>order: 0</em></p><p class="block block--beta">Two<br><em>order: 0</em></p><p class="block block--pink"><strong>Target<br><em>order: 0</em></strong></p><p class="block block--yellow">Four<br><em>order: 0</em></p></div></div></aside></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="order: 1;">order: 1;</code></p><div class="example-description"><p>The order is <strong>relative</strong> to the flexbox item's <em>siblings</em>. The final order is defined when all individual flexbox item order values are taken into account.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div order" id="order-1"><p class="block block--alpha">One<br><em>order: 0</em></p><p class="block block--beta">Two<br><em>order: 0</em></p><p class="block block--pink"><strong>Target<br><em>order: 1</em></strong></p><p class="block block--yellow">Four<br><em>order: 0</em></p></div></div></aside><style type="text/css">#order-1 .block--pink { order: 1; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="order: -1;">order: -1;</code></p><div class="example-description"><p>You can use <strong>negative</strong> values.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div order" id="order--1"><p class="block block--alpha">One<br><em>order: 0</em></p><p class="block block--beta">Two<br><em>order: 0</em></p><p class="block block--pink"><strong>Target<br><em>order: -1</em></strong></p><p class="block block--yellow">Four<br><em>order: 0</em></p></div></div></aside><style type="text/css">#order--1 .block--pink { order: -1; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="order: 9;">order: 9;</code></p><div class="example-description"><p>You can set a <strong>different</strong> value for each flexbox item.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div order" id="order-9"><p class="block block--alpha">One<br><em>order: 13</em></p><p class="block block--beta">Two<br><em>order: -7</em></p><p class="block block--pink"><strong>Target<br><em>order: 9</em></strong></p><p class="block block--yellow">Four<br><em>order: 5</em></p></div></div></aside><style type="text/css">#order-9 .block--alpha { order: 13; }#order-9 .block--beta { order: -7; }#order-9 .block--pink { order: 9; }#order-9 .block--yellow { order: 5; }</style></section></section>