diff options
Diffstat (limited to 'files/id/web/css/flex-direction')
| -rw-r--r-- | files/id/web/css/flex-direction/index.html | 155 |
1 files changed, 0 insertions, 155 deletions
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 ---- -<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> - -{{csssyntax}} - -<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> |