--- title: flex-basis slug: Web/CSS/flex-basis translation_of: Web/CSS/flex-basis --- <div>{{CSSRef}}</div> <p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>flex-basis</code></strong> задаёт базовый размер флекс элемента по <strong>основной оси</strong>. Это свойство определяет размер контент-бокса, если не задано иначе через {{Cssxref("box-sizing")}}.</p> <div>{{EmbedInteractiveExample("pages/css/flex-basis.html")}}</div> <div class="note"> <p><strong>Внимание:</strong> в случае, если для элемента одновременно заданы <code>flex-basis</code> (отличное от <code>auto</code>) и <code>width</code> ( или <code>height</code> в случае <code>flex-direction: column</code>), <code>flex-basis</code> имеет приоритет.</p> </div> <p>{{cssinfo}}</p> <h2 id="Синтаксис">Синтаксис</h2> <pre class="brush:css no-line-numbers">/* Устанавливает <'ширину'> */ 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; /* Автоматически изменяет размер на основе содержимого элемента */ flex-basis: content; /* Глобальное значения */ flex-basis: inherit; flex-basis: initial; flex-basis: unset; </pre> <p>Свойство <code>flex-basis</code> задаётся через ключевое слово <code><a href="#content">content</a></code> или через <code><a href="#<'width'>"><'width'></a></code>.</p> <h3 id="Значения">Значения</h3> <dl> <dt><a id="<'width'>" name="<'width'>"><code><'ширина'></code></a></dt> <dd>An absolute {{cssxref("<length>")}}, a {{cssxref("<percentage>")}} родительского flex контейнера главное size свойство, или ключевое слово <code>auto</code>. Негативные значения не допустимы.</dd> <dt><a id="content" name="content"><code>content</code></a></dt> <dd>Автоматический задаёт размер на основе содержимого элемента flex.</dd> <dd> <div class="note"><strong>Примечание:</strong> Это значение отсутствовало в первоначальном релизе Flexible Box Layout, и, следовательно, некоторые предыдущие релизы не будут поддерживать его. Аналогичный эффект можно получить, используя <code>auto</code> вместе с основным размером (<a href="https://drafts.csswg.org/css2/visudet.html#propdef-width">width</a> или <a href="https://drafts.csswg.org/css2/visudet.html#propdef-height">height</a>) <code>auto</code>.</div> <div class="note"> <p id="comment_text_0"><strong>История:</strong></p> <ul> <li>Первоначально, <code>flex-basis:auto</code> означает "смотреть на значения <code>width</code> или <code>height</code>".</li> <li>Затем <code>flex-basis:auto</code> был изменён на автоматический размер, а "main-size" было введено как ключевое слово, означающее "смотреть на значения <code>width</code> или <code>height</code>". Это было реализован в <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'>баге 1032922</a>.</li> <li>Затем в <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'>баге 1093316</a> это было возвращено обратно, поэтому <code>auto</code> снова означает "смотреть на значения <code>width</code> или <code>height</code>"; а новое ключевое слово <code>content</code> было введено для автоматического размера. ({{bug("1105111")}} охватывает добавление этого ключевого слова).</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> <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="gtx-anchor" style="position: absolute; left: 185px; top: 1956px; width: 393px; height: 17px;"></div> <div class="jfk-bubble gtx-bubble" style=""> <div class="jfk-bubble-content-id" id="bubble-24"> <div id="gtx-host" style="max-width: 400px;"></div> </div> <div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div> <div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowup" style="left: 176.5px;"> <div class="jfk-bubble-arrowimplbefore"></div> <div class="jfk-bubble-arrowimplafter"></div> </div> </div>