From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/id/web/css/flex-direction/index.html | 155 +++++++++++++++++++++++++++++ 1 file changed, 155 insertions(+) create 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 new file mode 100644 index 0000000000..7406212148 --- /dev/null +++ b/files/id/web/css/flex-direction/index.html @@ -0,0 +1,155 @@ +--- +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