---
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">/* Устанавливает &lt;'ширину'&gt; */
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="#&lt;'width'>">&lt;'width'&gt;</a></code>.</p>

<h3 id="Значения">Значения</h3>

<dl>
 <dt><a id="&lt;'width'>" name="&lt;'width'>"><code>&lt;'ширина'&gt;</code></a></dt>
 <dd>An absolute {{cssxref("&lt;length&gt;")}}, a {{cssxref("&lt;percentage&gt;")}} родительского 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">&lt;ul class="container"&gt;
  &lt;li class="flex flex1"&gt;1: flex-basis test&lt;/li&gt;
  &lt;li class="flex flex2"&gt;2: flex-basis test&lt;/li&gt;
  &lt;li class="flex flex3"&gt;3: flex-basis test&lt;/li&gt;
  &lt;li class="flex flex4"&gt;4: flex-basis test&lt;/li&gt;
  &lt;li class="flex flex5"&gt;5: flex-basis test&lt;/li&gt;
&lt;/ul&gt;

&lt;ul class="container"&gt;
  &lt;li class="flex flex6"&gt;6: flex-basis test&lt;/li&gt;
&lt;/ul&gt;
</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>