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, 0 insertions, 206 deletions
diff --git a/files/vi/web/css/flex-basis/index.html b/files/vi/web/css/flex-basis/index.html deleted file mode 100644 index 7163463f37..0000000000 --- a/files/vi/web/css/flex-basis/index.html +++ /dev/null @@ -1,206 +0,0 @@ ---- -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> - -{{csssyntax}} - -<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> |