index.html

--- layout: single property_name: align-items ---<section id="align-items" class="property"><header class="property-header"><nav class="property-links"><a class="property-links-direct" href="{{site.url}}/property/align-items/" data-property-name="align-items" data-tooltip="Single page for this property" target="_blank">Link</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="align-items">Share</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="{{site.url}}/#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 _bottom.</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>