フレキシボックス注文とタブ移動ナビゲーション

私はディスプレイを使用したいと思います：ラインクラスでdiv要素の順序を変更するにはを曲げるのが、私は、このタブナビゲーションの秩序を維持したいと思います：A→B→C→ D.フレキシボックス注文とタブ移動ナビゲーション

スニペットでわかるように、最初の例はうまくいきます（DOMシーケンスはOrderと同じですが）2番目の例では、DOMシーケンスに従います。

javascriptを使用しないでもチャンスですか？

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.line { 
 
    padding: 5px; 
 
    border: 1px solid gray; 
 
    margin-bottom: 5px; 
 
} 
 

 
.line span { 
 
    margin-left: 7px; 
 
}

<h2> 
 
    Tabbing navigation OK 
 
</h2> 
 
<div class="container"> 
 
    <div class="line" style="order: 1;"><input value="A"><span>1st div - Order: 1</span></div> 
 
    <div class="line" style="order: 2;"><input value="B"><span>2nd div - Order: 2</span></div> 
 
    <div class="line" style="order: 3;"><input value="C"><span>3rd div - Order: 3</span></div> 
 
    <div class="line" style="order: 4;"><input value="D"><span>4th div - Order: 4</span></div> 
 
</div> 
 

 
<h2> 
 
    Tabbing navigation KO 
 
</h2> 
 
<div class="container"> 
 
    <div class="line" style="order: 1;"><input value="A"><span>1st div - Order: 1</span></div> 
 
    <div class="line" style="order: 4;"><input value="C"><span>2nd div - Order: 4</span></div> 
 
    <div class="line" style="order: 3;"><input value="C"><span>3rd div - Order: 3</span></div> 
 
    <div class="line" style="order: 2;"><input value="B"><span>4th div - Order: 2</span></div> 
 
</div>

JSFiddleリンクhere。事前

出典

2017-06-01 Alex

私が考えることができる唯一の方法は、 'tabindex'を使うことです。 –

あなたはCSSを経由するかどうかフレックス利用やコンテンツを浮動ことで、視覚的順序を変更するための良い方法は何も現在ありませんtabindex HTML属性

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.line { 
 
    padding: 5px; 
 
    border: 1px solid gray; 
 
    margin-bottom: 5px; 
 
} 
 

 
.line span { 
 
    margin-left: 7px; 
 
}

<h2> 
 
    Tabbing navigation OK 
 
</h2> 
 
<div class="container"> 
 
    <div class="line" style="order: 1;"><input value="A"><span>1st div - Order: 1</span></div> 
 
    <div class="line" style="order: 2;"><input value="B"><span>2nd div - Order: 2</span></div> 
 
    <div class="line" style="order: 3;"><input value="C"><span>3rd div - Order: 3</span></div> 
 
    <div class="line" style="order: 4;"><input value="D"><span>4th div - Order: 4</span></div> 
 
</div> 
 

 
<h2> 
 
    Tabbing navigation KO 
 
</h2> 
 
<div class="container"> 
 
    <div class="line" style="order: 1;"><input value="A" tabindex="1"><span>1st div - Order: 1</span></div> 
 
    <div class="line" style="order: 4;"><input value="C" tabindex="4"><span>2nd div - Order: 4</span></div> 
 
    <div class="line" style="order: 3;"><input value="C" tabindex="3"><span>3rd div - Order: 3</span></div> 
 
    <div class="line" style="order: 2;"><input value="B" tabindex="2"><span>4th div - Order: 2</span></div> 
 
</div>

出典

2017-06-01 13:41:01

返信いただきありがとうございます。私はtabindexを使用していないものを探していましたが、必要であるようです... – Alex

@Alex JSを使いたくないのなら、それは唯一の方法です。 CSSは表示専用ですので、CSSで行うことはできません。 tabindexの何が問題なの？ –

各div.lineの実際のケースでは、例のような入力だけでなく、多くの要素があります。私はtabindexにバインドしません。しかし、私はあまりにもこれが唯一の方法だと思う... :)ありがとう！ – Alex