---
title: flex
slug: Web/CSS/flex
tags:
  - CSS
  - CSS Flexible Boxes
  - Tham khảo
  - Tham số CSS
translation_of: Web/CSS/flex
---
<div>{{CSSRef}}</div>

<div>Tham số CSS flex qui định những thành phần con bên trong thành phần cha sẽ co lại hoặc giản ra như thế nào.</div>

<div>Dưới đây là các giá trị có thể:</div>

<div>{{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}}, và {{cssxref("flex-basis")}}</div>

<div> </div>

<pre class="brush:css no-line-numbers">/* Giá trị cơ bản */
flex: auto;
flex: initial;
flex: none;
flex: 2;

/* Một giá trị thể hiện cho flex-grow */
flex: 2;

/* Một giá trị (độ rộng hoặc chiều cao) thể hiện cho flex-basis */
flex: 10em;
flex: 30px;

/* Hai giá trị thể hiện cho  flex-grow (1) và flex-basis (30px) */
/* Bởi vì 30px nên thể hiện cho flex-basis */
flex: 1 30px;

/* Hai giá trị thể  hiện cho flex-grow và flex-shrink */
flex: 2 2;

/* Ba giá trị thể hiện cho  flex-grow và flex-shrink và flex-basis */
flex: 2 2 10%;

/* Nhữg giá trị khái quát */
flex: inherit;
flex: initial;
flex: unset;
</pre>

<p>Trong hầu hết các trường hợp, Bạn nên sử dụng những giá trị sau: auto, initial, none, hoặc những số dương duy nhất. Để nhìn thấy hiệu quả của những giá trị này thử thay đổi kích thước của những "thành phần cha" sau đây:</p>

<div id="flex">
<pre class="hidden brush: html">&lt;div class="flex-container"&gt;
  &lt;div class="item auto"&gt;auto&lt;/div&gt;
  &lt;div class="item auto"&gt;auto&lt;/div&gt;
  &lt;div class="item auto"&gt;auto&lt;/div&gt;
&lt;/div&gt;

&lt;div class="flex-container"&gt;
  &lt;div class="item auto"&gt;auto&lt;/div&gt;
  &lt;div class="item initial"&gt;initial&lt;/div&gt;
  &lt;div class="item initial"&gt;initial&lt;/div&gt;
&lt;/div&gt;

&lt;div class="flex-container"&gt;
  &lt;div class="item auto"&gt;auto&lt;/div&gt;
  &lt;div class="item auto"&gt;auto&lt;/div&gt;
  &lt;div class="item none"&gt;none&lt;/div&gt;
&lt;/div&gt;

&lt;div class="flex-container"&gt;
  &lt;div class="item initial"&gt;initial&lt;/div&gt;
  &lt;div class="item none"&gt;none&lt;/div&gt;
  &lt;div class="item none"&gt;none&lt;/div&gt;
&lt;/div&gt;

&lt;div class="flex-container"&gt;
  &lt;div class="item four"&gt;4&lt;/div&gt;
  &lt;div class="item two"&gt;2&lt;/div&gt;
  &lt;div class="item one"&gt;1&lt;/div&gt;
&lt;/div&gt;
</pre>

<pre class="hidden brush: css">* {
  box-sizing: border-box;
}

.flex-container {
  background-color: #F4F7F8;
  resize: horizontal;
  overflow: hidden;
  display: flex;
  margin: 1em;
}

.item {
  margin: 1em;
  padding: 0.5em;
  width: 110px;
  min-width: 0;
  background-color: #1B5385;
  color: white;
  font-family: monospace;
  font-size: 13px;
}

.initial {
  flex: initial;
}

.auto {
  flex: auto;
}

.none {
  flex: none;
}

.four {
  flex: 4;
}

.two {
  flex: 2;
}

.one {
  flex: 1;
}
</pre>

<p>{{EmbedLiveSample("flex", 1200, 370, "", "", "example-outcome-frame")}}</p>

<dl>
 <dt><code>auto</code></dt>
 <dt> </dt>
 <dd>Những "thành phần con" được quy định kích thước bởi những tham số width và height, nhưng "thành phần con" này sẽ cố gắng lấp đầy hoặc là thu nhỏ lại để phù hợp với "thành phần cha". Cú pháp này tương ứng với: "flex: 1 1 auto".</dd>
 <dt><code>initial</code></dt>
 <dd>Đây là giá trị mặc định ( giá trị khi bạn không khai báo cho "thành phần con"). "Thành phần con" có kích thước tùy theo tham số width và height. "Thành phần con" sẽ co lại để phù hợp với "thành phần cha", nhưng nó sẽ không phình to ra để lấp đầy khoảng trống trong thành phần cha. Cú pháp này tương ứng với: "flex: 0 1 auto."</dd>
 <dt><code>none</code></dt>
 <dd>"Thành phần con" có kích thước tùy theo tham số width và height. Nó sẽ không co lại hay phình to trong "thành phần cha". Cú pháp  này tương ứng với: "flex: 0 0 auto"</dd>
 <dt><code>&lt;số dương&gt;</code></dt>
 <dd>"Thành phần con" được cho một tỉ lệ cụ thể trong khoảng trống của thành phần cha. Cú pháp này tương ứng với: "flex: &lt;số dương&gt; 1 0"</dd>
</dl>

<p>Theo quy định, thì "thành phần con" không thu nhỏ lại quá kích thước  nhỏ nhất mà nó cho phép. Để thay đổi kích thước nhỏ nhất bạn có thể dùng: {{cssxref("min-width")}} hoặc {{cssxref("min-height")}}.</p>
</div>

<p>{{cssinfo}}</p>

<h2 id="Syntax" name="Syntax">Cú pháp</h2>

<p>Tham số flex có thể sử dụng với một, hai hoặc 3 giá trị.</p>

<p><strong>Cú pháp với 1 giá trị</strong>: Giá trị đó có thể là:</p>

<ul>
 <li>một giá trị đơn lẻ {{cssxref("&lt;number&gt;")}}: được xem nư là <code><a href="#&lt;'flex-grow'>">&lt;flex-grow&gt;</a></code>.</li>
 <li>một giá trị với đơn vị là độ rộng {{cssxref("width")}}: khi đó được xem như là <code><a href="#&lt;'flex-basis'>">&lt;flex-basis&gt;</a></code>.</li>
 <li>một giá trị là các từ sau: <code><a href="#none">none</a></code>, <code>auto</code>, or <code>initial</code>.</li>
</ul>

<p><strong>Cú pháp với 2 giá trị</strong>: giá trị đầu phải là giá trị đơn lẻ {{cssxref("&lt;number&gt;")}} được xem là <code><a href="#&lt;'flex-grow'>">&lt;flex-grow&gt;</a></code>. Giá trị thứ 2 phải thuộc 1 trong 2 giá trị sau:</p>

<ul>
 <li>một giá trị lẻ {{cssxref("&lt;number&gt;")}}: được xem là <code><a href="#&lt;'flex-grow'>">&lt;flex-shrink&gt;</a></code>.</li>
 <li>một giá trị với đơn vị (độ rộng hoặc chiều cao) {{cssxref("width")}}: được xem là <code><a href="#&lt;'flex-basis'>">&lt;flex-basis&gt;</a></code>.</li>
</ul>

<p><strong>Cú pháp với 3 giá trị:</strong></p>

<ul>
 <li>Giá trị đầu phải đơn lẻ {{cssxref("&lt;number&gt;")}} được xem như là <code><a href="#&lt;'flex-grow'>">&lt;flex-grow&gt;</a></code>.</li>
 <li>Giá trị thứ 2 phải đơn lẻ {{cssxref("&lt;number&gt;")}} được xem như là <code><a href="#&lt;'flex-grow'>">&lt;flex-shrink&gt;</a></code>.</li>
 <li>Giá trị thứ 3 phải là hợp lý như độ rộng hoặc chiều cao {{cssxref("width")}} được xem như là <code><a href="#&lt;'flex-basis'>">&lt;flex-basis&gt;</a></code>.</li>
</ul>

<h3 id="Values" name="Values">Values</h3>

<dl>
 <dt><a id="&lt;'flex-grow'>" name="&lt;'flex-grow'>"><code>&lt;'flex-grow'&gt;</code></a></dt>
 <dd>Định nghĩa {{cssxref("flex-grow")}} cho "thành phần con". Tìm hiểu {{cssxref("&lt;number&gt;")}} để biết thêm thông tin chi tiết Giá trị âm là không hợp lệ. Giá trị mặc định là 0 nếu không cung cấp.</dd>
 <dt><a id="&lt;'flex-shrink'>" name="&lt;'flex-shrink'>"><code>&lt;'flex-shrink'&gt;</code></a></dt>
 <dd>Định nghĩa {{cssxref("flex-shrink")}} cho "thành phần con". Tìm hiểu {{cssxref("&lt;number&gt;")}} để biết thêm thông tin chi tiết. Giá trị âm là không hợp lệ. Giá trị mặc định là 1 nếu không cung cấp.</dd>
 <dt><a id="&lt;'flex-basis'>" name="&lt;'flex-basis'>"><code>&lt;'flex-basis'&gt;</code></a></dt>
 <dd>Định nghĩa {{cssxref("flex-basis")}} cho "thành phần con". Bất cứ giá trị hợp lệ nào cho độ rộng hoặc chiều cao điều sử dụng được. Tốt nhất là phải cung cấp đơn vị. Giá trị mặc định là auto nếu không cung cấp.</dd>
 <dt><a id="none" name="none"><code>none</code></a></dt>
 <dd>Định nghĩa này tương đương với 0 0 auto.</dd>
</dl>

<div class="note">
<p>Khi sử dụng một hoặc nhiều giá trị đơn lẻ, flex-basis sẽ đổi từ auto tới 0. Để biết thêm chi tiết có thể xem bản draft <a href="https://drafts.csswg.org/css-flexbox/#flex-common">Flexible Box Layout Module.</a></p>
</div>

<dl>
 <dt>
 <h3 id="Formal_syntax">Formal syntax</h3>
 </dt>
</dl>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Ví_dụ">Ví dụ</h2>

<pre class="brush: css">#flex-container {
  display: flex;
  flex-direction: row;
}

#flex-container &gt; .flex-item {
  flex: auto;
}

#flex-container &gt; .raw-item {
  width: 5rem;
}
</pre>

<pre class="brush: html">&lt;div id="flex-container"&gt;
  &lt;div class="flex-item" id="flex"&gt;Flex box (click to toggle raw box)&lt;/div&gt;
  &lt;div class="raw-item" id="raw"&gt;Raw box&lt;/div&gt;
&lt;/div&gt;
</pre>

<div class="hidden">
<pre class="brush: js">var flex = document.getElementById("flex");
var raw = document.getElementById("raw");
flex.addEventListener("click", function() {
  raw.style.display = raw.style.display == "none" ? "block" : "none";
});
</pre>

<pre class="brush: css">#flex-container {
  width: 100%;
  font-family: Consolas, Arial, sans-serif;
}

#flex-container &gt; div {
  border: 1px solid #f00;
  padding: 1rem;
}

#flex-container &gt; .raw-item {
  border: 1px solid #000;
}
</pre>
</div>

<h3 id="Kết_quả">Kết quả</h3>

<p>{{EmbedLiveSample('Example','100%','60')}}</p>

<h2 id="Specifications" name="Specifications">Thông số kỷ thuật</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th>Specification</th>
   <th>Status</th>
   <th>Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}</td>
   <td>{{Spec2('CSS3 Flexbox')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Độ_tương_thích_với_các_trình_duyệt_hiện_tại">Độ tương thích với các trình duyệt hiện tại</h2>

<p>{{CompatibilityTable()}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Firefox (Gecko)</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br>
    {{CompatGeckoDesktop("20.0")}}<br>
    {{CompatGeckoDesktop("28.0")}}<sup>[2]</sup></td>
   <td>21.0{{property_prefix("-webkit")}}<br>
    29.0</td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
    {{CompatVersionUnknown}}</td>
   <td>10.0{{property_prefix("-ms")}}<sup>[3]</sup><br>
    11.0<sup>[3]</sup></td>
   <td>12.10</td>
   <td>
    <p>6.1{{property_prefix("-webkit")}}<br>
     9.0</p>
   </td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Android</th>
   <th>Edge</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>4.4</td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
    {{CompatVersionUnknown}}</td>
   <td>11</td>
   <td>12.10</td>
   <td>7.1{{property_prefix("-webkit")}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] In Gecko 18.0 {{geckoRelease("18.0")}} và 19.0 {{geckoRelease("19.0")}} tính năng flexbox hổ trợ ẩn trong  <code>about:config</code> với cấu hình <code>layout.css.flexbox.enabled</code>, giá trị mặc định là <code>false</code>.</p>

<p>[2] Multi-line flexbox được hỗ trợ  từ Gecko 28.0 {{geckoRelease("28.0")}}.</p>

<p>Thêm nửa về hỗ trợ unprefixed, Gecko 48.0 {{geckoRelease("48.0")}} được hỗ trợ với tiền tố  <code>-webkit</code> vì lý do tương thích xem <code>layout.css.prefixes.webkit</code>, giá trị mặc định to <code>false</code>. Từ Gecko 49.0 {{geckoRelease("49.0")}} giá trị mặc định là <code>true</code>.</p>

<p>[3] Internet Explorer 10-11 (but not 12+) bỏ qua việc sử dụng <a href="/en-US/docs/Web/CSS/calc"><code>calc()</code></a> trong phần flex-basis part của cú pháp <code>flex</code> . Có thể dùng longhand thay thế cho shorthand như một sự thay thế. Nhìn <a href="https://github.com/philipwalton/flexbugs#8-flex-basis-doesnt-support-calc">Flexbug #8</a> để tìm hiểu thêm. Thêm nửa cú pháp flex với một giá trị đơn lẻ trong <code>flex-basis</code> được xem như không hợp lệ trong những version trên và vì vậy sẽ bị phớt lờ . Một cách để giải quyết vấn đề này là luôn luôn thêm một đơn vị cho phần <code>flex-basis</code> trong cú pháp đơn giản. Nhìn <a href="https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored">Flexbug #4</a> để  tìm hiểu thêm.</p>

<h2 id="See_also" name="See_also">Nên xem thêm</h2>

<ul>
 <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li>
</ul>