From 95aca4b4d8fa62815d4bd412fff1a364f842814a Mon Sep 17 00:00:00 2001 From: Ryan Johnson Date: Thu, 29 Apr 2021 16:16:42 -0700 Subject: remove retired locales (#699) --- files/vi/web/css/flex/index.html | 347 --------------------------------------- 1 file changed, 347 deletions(-) delete mode 100644 files/vi/web/css/flex/index.html (limited to 'files/vi/web/css/flex') diff --git a/files/vi/web/css/flex/index.html b/files/vi/web/css/flex/index.html deleted file mode 100644 index 2d626dc4cd..0000000000 --- a/files/vi/web/css/flex/index.html +++ /dev/null @@ -1,347 +0,0 @@ ---- -title: flex -slug: Web/CSS/flex -tags: - - CSS - - CSS Flexible Boxes - - Tham khảo - - Tham số CSS -translation_of: Web/CSS/flex ---- -
{{CSSRef}}
- -
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ể:
- -
{{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}}, và {{cssxref("flex-basis")}}
- -
 
- -
/* 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:

- -
- - - - -

{{EmbedLiveSample("flex", 1200, 370, "", "", "example-outcome-frame")}}

- -
-
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: {{cssxref("min-width")}} hoặc {{cssxref("min-height")}}.

-
- -

{{cssinfo}}

- -

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à:

- - - -

Cú pháp với 2 giá trị: giá trị đầu phải là giá trị đơn lẻ {{cssxref("<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ị:

- - - -

Values

- -
-
<'flex-grow'>
-
Định nghĩa {{cssxref("flex-grow")}} cho "thành phần con". Tìm hiểu {{cssxref("<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 {{cssxref("flex-shrink")}} cho "thành phần con". Tìm hiểu {{cssxref("<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 {{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.
-
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

-
-
- -{{csssyntax}} - -

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ả

- -

{{EmbedLiveSample('Example','100%','60')}}

- -

Thông số kỷ thuật

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}{{Spec2('CSS3 Flexbox')}}Initial definition
- -

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

- -

{{CompatibilityTable()}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("18.0")}}[1]
- {{CompatGeckoDesktop("20.0")}}
- {{CompatGeckoDesktop("28.0")}}[2]		21.0{{property_prefix("-webkit")}}
- 29.0		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
- {{CompatVersionUnknown}}		10.0{{property_prefix("-ms")}}[3]
- 11.0[3]		12.10 -

6.1{{property_prefix("-webkit")}}
- 9.0

-
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox Mobile (Gecko)AndroidEdgeIE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}4.4{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
- {{CompatVersionUnknown}}		1112.107.1{{property_prefix("-webkit")}}
-
- -

[1] In Gecko 18.0 {{geckoRelease("18.0")}} và 19.0 {{geckoRelease("19.0")}} 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 {{geckoRelease("28.0")}}.

- -

Thêm nửa về hỗ trợ unprefixed, Gecko 48.0 {{geckoRelease("48.0")}} đượ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 {{geckoRelease("49.0")}} 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

- - -- cgit v1.2.3-54-g00ecf