diff options
Diffstat (limited to 'files/vi/web/css/flex-basis/index.html')
| -rw-r--r-- | files/vi/web/css/flex-basis/index.html | 206 |
1 files changed, 206 insertions, 0 deletions
diff --git a/files/vi/web/css/flex-basis/index.html b/files/vi/web/css/flex-basis/index.html new file mode 100644 index 0000000000..8b2021d009 --- /dev/null +++ b/files/vi/web/css/flex-basis/index.html @@ -0,0 +1,206 @@ +--- +title: flex-basis +slug: Web/CSS/flex-basis +translation_of: Web/CSS/flex-basis +--- +<div>{{CSSRef}}</div> + +<p>The <strong><code>flex-basis</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with {{Cssxref("box-sizing")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/flex-basis.html")}}</div> + + + +<div class="note"> +<p><strong>Note:</strong> in case both <code>flex-basis</code> (other than <code>auto</code>) and <code>width</code> (or <code>height</code> in case of <code>flex-direction: column</code>) are set for an element, <code>flex-basis</code> has priority.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css no-line-numbers">/* Specify <'width'> */ +flex-basis: 10em; +flex-basis: 3px; +flex-basis: auto; + +/* Intrinsic sizing keywords */ +flex-basis: fill; +flex-basis: max-content; +flex-basis: min-content; +flex-basis: fit-content; + +/* Automatically size based on the flex item’s content */ +flex-basis: content; + +/* Global values */ +flex-basis: inherit; +flex-basis: initial; +flex-basis: unset; +</pre> + +<p>The <code>flex-basis</code> property is specified as either the keyword <code><a href="#content">content</a></code> or a <code><a href="#<'width'>"><'width'></a></code>.</p> + +<h3 id="Values">Values</h3> + +<dl> + <dt><a id="<'width'>" name="<'width'>"><code><'width'></code></a></dt> + <dd>An absolute {{cssxref("<length>")}}, a {{cssxref("<percentage>")}} of the parent flex container's main size property, or the keyword <code>auto</code>. Negative values are invalid. Defaults to <code>auto</code>.</dd> + <dt><a id="content" name="content"><code>content</code></a></dt> + <dd>Indicates automatic sizing, based on the flex item’s content.</dd> + <dd> + <div class="note"><strong>Note:</strong> This value was not present in the initial release of Flexible Box Layout, and thus some older implementations will not support it. The equivalent effect can be had by using <code>auto</code> together with a main size (<a href="https://drafts.csswg.org/css2/visudet.html#propdef-width">width</a> or <a href="https://drafts.csswg.org/css2/visudet.html#propdef-height">height</a>) of <code>auto</code>.</div> + + <div class="note"> + <p id="comment_text_0"><strong>History:</strong></p> + + <ul> + <li>Originally, <code>flex-basis:auto</code> meant "look at my <code>width</code> or <code>height</code> property".</li> + <li>Then, <code>flex-basis:auto</code> was changed to mean automatic sizing, and "main-size" was introduced as the "look at my <code>width</code> or <code>height</code> property" keyword. It was implemented in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1032922" title='RESOLVED FIXED - Rename "flex-basis:auto" to "main-size", while preserving "flex:auto" shorthand value'>bug 1032922</a>.</li> + <li>Then, that change was reverted in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1093316" title='RESOLVED FIXED - Back out flexbox "flex-basis:main-size" rename, since the CSSWG removed it from the spec'>bug 1093316</a>, so <code>auto</code> once again means "look at my <code>width</code> or <code>height</code> property"; and a new <code>content</code> keyword is being introduced to trigger automatic sizing. ({{bug("1105111")}} covers adding that keyword).</li> + </ul> + </div> + </dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example">Example</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul class="container"> + <li class="flex flex1">1: flex-basis test</li> + <li class="flex flex2">2: flex-basis test</li> + <li class="flex flex3">3: flex-basis test</li> + <li class="flex flex4">4: flex-basis test</li> + <li class="flex flex5">5: flex-basis test</li> +</ul> + +<ul class="container"> + <li class="flex flex6">6: flex-basis test</li> +</ul> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.container { + font-family: arial, sans-serif; + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + flex-wrap: wrap; +} + +.flex { + background: #6AB6D8; + padding: 10px; + margin-bottom: 50px; + border: 3px solid #2E86BB; + color: white; + font-size: 20px; + text-align: center; + position: relative; +} + +.flex:after { + position: absolute; + z-index: 1; + left: 0; + top: 100%; + margin-top: 10px; + width: 100%; + color: #333; + font-size: 18px; +} + +.flex1 { + flex-basis: auto; +} + +.flex1:after { + content: 'auto'; +} + +.flex2 { + flex-basis: max-content; +} + +.flex2:after { + content: 'max-content'; +} + +.flex3 { + flex-basis: min-content; +} + +.flex3:after { + content: 'min-content'; +} + +.flex4 { + flex-basis: fit-content; +} + +.flex4:after { + content: 'fit-content'; +} + +.flex5 { + flex-basis: content; +} + +.flex5:after { + content: 'content'; +} + +.flex6 { + flex-basis: fill; +} + +.flex6:after { + content: 'fill'; +} +</pre> + +<h3 id="Results">Results</h3> + +<p>{{EmbedLiveSample('Example', '860', '360', '', 'Web/CSS/flex-basis')}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#propdef-flex-basis', 'flex-basis')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.flex-basis")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li> + <li>{{cssxref("width")}}</li> +</ul> + +<div id="eJOY__extension_root" style=""></div> |