さまざまなブラウザでの Flexbox の列反転動作
Flexbox は強力なレイアウト システムを提供しますが、ブラウザ間で特定のプロパティを実装すると不一致が発生します。このような問題の 1 つは、Firefox、Edge、IE の flex-direction: column-reverse プロパティの動作に関係しています。
問題
次の HTML と CSS を考慮してください。コード:
<code class="html"><div id="list"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div></code>
<code class="css">#list { display: flex; flex-direction: column-reverse; height: 250px; overflow-y: scroll; } .item { flex: 1; padding: 2em; border: 1px dashed green; }</code>
期待される動作
このコードが Chrome で表示されると、上にスクロールして表示できる項目の垂直リストが作成されます。以前のエントリ。
予期しない動作
ただし、Firefox、Edge、IE/Edge では、スクロール バーが無効になっているように見えます。
理由
この動作は、前述のブラウザーのバグに起因します。 flex-direction: column-reverse が使用されている場合、スクロール バーは Chrome でのみ機能します。 column-reverse を Simply columns に変更すると、スクロール バーはすべてのブラウザで機能します。
追加情報
このバグの詳細については、次を参照してください。リソース:
以上がFirefox、Edge、IE/Edge で「flex-direction: column-reverse」によりスクロールバーが無効になるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。