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/id/web/css/flex-direction/index.html | 155 ----------------------------- 1 file changed, 155 deletions(-) delete mode 100644 files/id/web/css/flex-direction/index.html (limited to 'files/id/web/css/flex-direction') diff --git a/files/id/web/css/flex-direction/index.html b/files/id/web/css/flex-direction/index.html deleted file mode 100644 index a706f2ac22..0000000000 --- a/files/id/web/css/flex-direction/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: flex-direction -slug: Web/CSS/flex-direction -translation_of: Web/CSS/flex-direction ---- -
{{CSSRef}}
- -


-

- -

flex-direction  adalah properti css yang menentukan sumbu utama dan arah (normal atau terbalik ) dari flex item yang ditempatkan di flex container / wadah .

- -
{{EmbedInteractiveExample("pages/css/flex-direction.html")}}
- - - -

Note that the values row and row-reverse are affected by the directionality of the flex container. If its {{HTMLAttrxRef("dir")}} attribute is ltr, row represents the horizontal axis oriented from the left to the right, and row-reverse from the right to the left; if the dir attribute is rtl, row represents the axis oriented from the right to the left, and row-reverse from the left to the right.

- -

Syntax

- -
/* The direction text is laid out in a line */
-flex-direction: row;
-
-/* Like <row>, but reversed */
-flex-direction: row-reverse;
-
-/* The direction in which lines of text are stacked */
-flex-direction: column;
-
-/* Like <column>, but reversed */
-flex-direction: column-reverse;
-
-/* Global values */
-flex-direction: inherit;
-flex-direction: initial;
-flex-direction: unset;
-
- -

Values

- -

The following values are accepted:

- -
-
row
-
The flex container's main-axis is defined to be the same as the text direction. The main-start and main-end points are the same as the content direction.
-
row-reverse
-
Behaves the same as row but the main-start and main-end points are permuted.
-
column
-
The flex container's main-axis is the same as the block-axis. The main-start and main-end points are the same as the before and after points of the writing-mode.
-
column-reverse
-
Behaves the same as column but the main-start and main-end are permuted.
-
- -

Accessibility concerns

- -

Using the flex-direction property with values of row-reverse or column-reverse will create a disconnect between the visual presentation of content and DOM order. This will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader. If the visual (CSS) order is important, then screen reader users will not have access to the correct reading order.

- - - -

Formal definition

- -

{{cssinfo}}

- -

Formal syntax

- -{{csssyntax}} - -

Examples

- -

Reversing flex container columns and rows

- -

HTML

- -
<h4>This is a Column-Reverse</h4>
-<div id="content">
-  <div class="box" style="background-color:red;">A</div>
-  <div class="box" style="background-color:lightblue;">B</div>
-  <div class="box" style="background-color:yellow;">C</div>
-</div>
-<h4>This is a Row-Reverse</h4>
-<div id="content1">
-  <div class="box1" style="background-color:red;">A</div>
-  <div class="box1" style="background-color:lightblue;">B</div>
-  <div class="box1" style="background-color:yellow;">C</div>
-</div>
-
- -

CSS

- -
#content {
-  width: 200px;
-  height: 200px;
-  border: 1px solid #c3c3c3;
-  display: flex;
-  flex-direction: column-reverse;
-}
-
-.box {
-  width: 50px;
-  height: 50px;
-}
-
-#content1 {
-  width: 200px;
-  height: 200px;
-  border: 1px solid #c3c3c3;
-  display: flex;
-  flex-direction: row-reverse;
-}
-
-.box1 {
-  width: 50px;
-  height: 50px;
-}
- -

Result

- -

{{EmbedLiveSample('Reversing_flex_container_columns_and_rows', '', '550')}}

- -

Specifications

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

Browser compatibility

- - - -

{{Compat("css.properties.flex-direction")}}

- -

See also

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