index.html

--- layout: single property_name: flex-basis ---<section id="flex-basis" class="property"><header class="property-header"><nav class="property-links"><a class="property-links-direct" href="{{site.url}}/property/flex-basis/" data-property-name="flex-basis" 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="flex-basis">Share</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="{{site.url}}/#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>