Bản dịch này chưa hoàn thành. Xin hãy giúp dịch bài viết này từ tiếng Anh.

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.
Dưới đây là các giá trị có thể:
 
/* 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;

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:

auto
 
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".
initial
Đâ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."
none
"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"
<số dương>
"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: <số dương> 1 0"

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: min-width hoặc min-height.

Initial valueas each of the properties of the shorthand:
Applies toflex items, including in-flow pseudo-elements
Inheritedno
Mediavisual
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
Canonical orderorder of appearance in the formal grammar of the values

Cú pháp

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

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

  • một giá trị đơn lẻ <number>: được xem nư là <flex-grow>.
  • một giá trị với đơn vị là độ rộng width: khi đó được xem như là <flex-basis>.
  • một giá trị là các từ sau: none, auto, or initial.

Cú pháp với 2 giá trị: giá trị đầu phải là giá trị đơn lẻ <number> được xem là <flex-grow>. Giá trị thứ 2 phải thuộc 1 trong 2 giá trị sau:

Cú pháp với 3 giá trị:

  • Giá trị đầu phải đơn lẻ <number> được xem như là <flex-grow>.
  • Giá trị thứ 2 phải đơn lẻ <number> được xem như là <flex-shrink>.
  • Giá trị thứ 3 phải là hợp lý như độ rộng hoặc chiều cao width được xem như là <flex-basis>.

Values

<'flex-grow'>
Định nghĩa flex-grow cho "thành phần con". Tìm hiểu <number> để 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.
<'flex-shrink'>
Định nghĩa flex-shrink cho "thành phần con". Tìm hiểu <number> để 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.
<'flex-basis'>
Định nghĩa 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.
none
Định nghĩa này tương đương với 0 0 auto.

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 Flexible Box Layout Module.

Formal syntax

none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Ví dụ

#flex-container {
  display: flex;
  flex-direction: row;
}

#flex-container > .flex-item {
  flex: auto;
}

#flex-container > .raw-item {
  width: 5rem;
}
<div id="flex-container">
  <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
  <div class="raw-item" id="raw">Raw box</div>
</div>

Kết quả

Thông số kỷ thuật

Specification Status Comment
CSS Flexible Box Layout Module
The definition of 'flex' in that specification.
Candidate Recommendation Initial definition

Độ tương thích với các trình duyệt hiện tại

Feature Firefox (Gecko) Chrome Edge Internet Explorer Opera Safari
Basic support 18.0 (18.0)[1]
20.0 (20.0)
28.0 (28.0)[2]
21.0-webkit
29.0
(Yes)-webkit
(Yes)
10.0-ms[3]
11.0[3]
12.10

6.1-webkit
9.0

Feature Firefox Mobile (Gecko) Android Edge IE Phone Opera Mobile Safari Mobile
Basic support ? 4.4 (Yes)-webkit
(Yes)
11 12.10 7.1-webkit

[1] In Gecko 18.0 (Firefox 18.0 / Thunderbird 18.0 / SeaMonkey 2.15) và 19.0 (Firefox 19.0 / Thunderbird 19.0 / SeaMonkey 2.16) tính năng flexbox hổ trợ ẩn trong  about:config với cấu hình layout.css.flexbox.enabled, giá trị mặc định là false.

[2] Multi-line flexbox được hỗ trợ  từ Gecko 28.0 (Firefox 28.0 / Thunderbird 28.0 / SeaMonkey 2.25).

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

[3] Internet Explorer 10-11 (but not 12+) bỏ qua việc sử dụng calc() trong phần flex-basis part của cú pháp flex . Có thể dùng longhand thay thế cho shorthand như một sự thay thế. Nhìn Flexbug #8 để tìm hiểu thêm. Thêm nửa cú pháp flex với một giá trị đơn lẻ trong flex-basis đượ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 flex-basis trong cú pháp đơn giản. Nhìn Flexbug #4 để  tìm hiểu thêm.

Nên xem thêm

Document Tags and Contributors

 Những người đóng góp cho trang này: tuanphpvn
 Cập nhật lần cuối bởi: tuanphpvn,