コンテンツがフレックスアイテムのサイズ変更を防ぐ方法を教えてください。

Question

私はCSSフレックスボックスを使用して、スケーラブルで反応性の高いグリッドを構築しています。フレックスボックスアイテムの1つにGoogleのチャートを適用すると、アイテムのサイズがそれほど変わらない。グリッドを整列から外すだけで十分です。問題を説明するのに役立つ次の画像をまとめました。

フレキシボックスグリッド項目6にGoogleのチャートを適用する前に：

フレキシボックスグリッド項目6にGoogleのチャートを適用した後：

フレキシボックスグリッドのロード速くグーグルよりグリッドは最初は正しく読み込まれます。しかし、チャートが読み込まれると、項目6が少し拡大して上の画像2が表示されます。次のように

中央カラムフレックスコンテナと項目6 DIVは、CSSに設定されている：

#middlecolumn { 
    width: 75%; 
    height: 100%; 
    display: flex; 
    flex-flow: column; 
    margin: 0.25%; 
} 

#item6_div { 
    flex: 3; 
    margin-top: 0.8vh; 
} 

注項目5,7は1のflex値と、CSSの同様設定されます。私。アイテム6は、アイテム5および7の高さの3倍です。したがって、アイテム6がサイズ変更されると、3：1の比率が維持されます。

Googleチャートでflexboxのコンテナアイテムのサイズを変更できないようにするために、CSSには何かがありますか？

Answer 1

あなたはflex: 3（項目6）またはflex: 1（項目5 & 7）にフレックスアイテムを教えてくれたとき、ここでその速記プロパティが故障した方法は次のとおりです。

どちらの場合も

flex: ? = <flex-grow>, <flex-shrink>, <flex-basis> 

flex: 3 = flex-grow: 3, flex-shrink: 1, flex-basis: 0 

flex: 1 = flex-grow: 1, flex-shrink: 1, flex-basis: 0 

、flex-shrink要因は、1でありますフレックスアイテムが比例して縮小できることを意味します。フレキシボックスで

flex: 3 0 0; 
flex: 1 0 0; 

詳細：

ずれを引き起こしている可能性の縮小からフレックスアイテムを、防ぐために、私はflex-shrink 0に

代わりのflex: 3とflex: 1試して変更します仕様：7.1.1. Basic Values of flex

---

しかし、別の問題がある可能性があります。あなたは書きました：

注意項目5と7は1のflex値で、CSSで同じように設定されていること。私。アイテム6は、アイテム5および7の高さの3倍です。したがって、アイテム6がサイズ変更されると、3：1の比率が維持されます。

これはflex-growプロパティの動作ではありません。

flex-grow: 3をフレックスアイテムに適用すると、flex-grow: 1のフレックスアイテムよりも3倍の空き領域が消費されることがわかります。これは必ずしもアイテム6がアイテム5とアイテム7の3倍のサイズになることを意味するものではありません。flex-growがここでどのように機能するか

が、詳細については、こちらをご覧ください：flex-grow not sizing flex items as expected

を代替サイジング方法として、あなたはflex-basisプロパティを使用することをお勧めします。アイテム6にはflex: 0 0 60%、アイテム5と7にはflex: 0 0 20%を試してください。