---
title: <flex>
slug: Web/CSS/flex_value
tags:
  - سی اس اس
  - قالب بندی
  - وب
translation_of: Web/CSS/flex_value
---
<div>{{CSSRef}}</div>

<p><strong><code dir="ltr">&lt;flex&gt;</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">data type</a> یک فاصله طولی منعطف را در یک جعبه محتوی گرید مشخص می‌کند. این نوع مقدار در {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} و سایر موارد مشابه استفاده می‌شود.</p>

<h2 id="سینتکس">سینتکس</h2>

<p>نوع داده <code>&lt;flex&gt;</code> به صورت {{cssxref("&lt;number&gt;")}} و در ادامه <a id="fr" name="fr"><code>fr</code></a> استفاده می‌شود. واحد <code>fr</code> کسری از فضای باقیمانده در جعبه محتوی گرید است. مانند سایر مقادیر در سی‌اس‌اس، بین مقدار و واحد فاصله‌ای نیست.</p>

<h2 id="مثال">مثال</h2>

<pre class="brush: css">1fr    /* استفاده از یک عدد طبیعی */
2.5fr  /* استفاده از یک عدد اعشاری */
</pre>

<h2 id="خصوصیات">خصوصیات</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">خصوصیت</th>
   <th scope="col">وضعیت</th>
   <th scope="col">توضیحات</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS Grid", "#typedef-flex", "&lt;flex&gt;")}}</td>
   <td>{{Spec2("CSS Grid")}}</td>
   <td>تعریف اولیه.</td>
  </tr>
 </tbody>
</table>

<h2 id="سازگاری_با_مرورگرها">سازگاری با مرورگرها</h2>



<p>{{Compat("css.types.flex")}}</p>

<h2 id="مقالات_مرتبط">مقالات مرتبط</h2>

<ul>
 <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
</ul>