diff options
Diffstat (limited to 'files/id/web/css/flex-direction/index.html')
| -rw-r--r-- | files/id/web/css/flex-direction/index.html | 155 |
1 files changed, 155 insertions, 0 deletions
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 +--- +<div>{{CSSRef}}</div> + +<p><br> +</p> + +<p dir="ltr"><strong id="docs-internal-guid-3c370947-7fff-bd87-9412-328b8bc6d405">flex-direction </strong>adalah properti css yang menentukan sumbu utama dan arah (normal atau terbalik ) dari flex item yang ditempatkan di flex container / wadah .</p> + +<div>{{EmbedInteractiveExample("pages/css/flex-direction.html")}}</div> + + + +<p>Note that the values <code>row</code> and <code>row-reverse</code> are affected by the directionality of the flex container. If its {{HTMLAttrxRef("dir")}} attribute is <code>ltr</code>, <code>row</code> represents the horizontal axis oriented from the left to the right, and <code>row-reverse</code> from the right to the left; if the <code>dir</code> attribute is <code>rtl</code>, <code>row</code> represents the axis oriented from the right to the left, and <code>row-reverse</code> from the left to the right.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css no-line-numbers notranslate">/* 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; +</pre> + +<h3 id="Values">Values</h3> + +<p>The following values are accepted:</p> + +<dl> + <dt><code>row</code></dt> + <dd>The flex container's main-axis is defined to be the same as the text direction. The <strong>main-start</strong> and <strong>main-end</strong> points are the same as the content direction.</dd> + <dt><code>row-reverse</code></dt> + <dd>Behaves the same as <code>row</code> but the <strong>main-start</strong> and <strong>main-end</strong> points are permuted.</dd> + <dt><code>column</code></dt> + <dd>The flex container's main-axis is the same as the block-axis. The <strong>main-start</strong> and <strong>main-end</strong> points are the same as the <strong>before</strong> and <strong>after</strong> points of the writing-mode.</dd> + <dt><code>column-reverse</code></dt> + <dd>Behaves the same as <code>column</code> but the <strong>main-start</strong> and <strong>main-end</strong> are permuted.</dd> +</dl> + +<h2 id="Accessibility_concerns">Accessibility concerns</h2> + +<p>Using the <code>flex-direction</code> property with values of <code>row-reverse</code> or <code>column-reverse</code> 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.</p> + +<ul> + <li><a class="external external-icon" href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/" rel="noopener">Flexbox & the keyboard navigation disconnect — Tink</a></li> + <li><a class="external external-icon" href="http://adrianroselli.com/2015/09/source-order-matters.html" rel="noopener">Source Order Matters | Adrian Roselli</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> + <li><a class="external external-icon" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html" rel="noopener">Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Formal_definition">Formal definition</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax">Formal syntax</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Reversing_flex_container_columns_and_rows">Reversing flex container columns and rows</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><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> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">#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; +}</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('Reversing_flex_container_columns_and_rows', '', '550')}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#flex-direction-property', 'flex-direction')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.properties.flex-direction")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></em></li> +</ul> |