css - CSS Flexbox を使用して列を削除できますか?

Question

FooTable が提供する機能と同様に、利用可能な不動産が小さい場合に CSS フレックスボックスが列 (フレックス項目) を削除する方法はありますか?

Answer 1

要素は、必要に応じて締め0pxます。コンテンツの非表示は を使用して処理できますがoverflow: hidden、これにより他のシナリオで問題が発生する可能性があることに注意してください。
結果を確認するには、次のスニペットを確認してください。

.container {
    display: flex;
}

.child1, .child3 {
    flex: 1 0 50%;
}

.child2 {
    flex: 1;
    overflow: hidden;
}

<div class="container">
    <div class="child1">child1</div>
    <div class="child2">child2</div>
    <div class="child3">child3</div>
</div>

その他の提案:

• ウィンドウ サイズに応じてメディア クエリを使用してコンテンツを非表示にします。
• メディア クエリを使用overflowして、ウィンドウ サイズに応じてプロパティを適用します。
• 非表示にしたくない場合はflex-wrap、フレックスアイテムを2行以上に広げてください