0

だから私はフレックスボックス、より正確にはボックス(display: box)だけを持っています。それはSass Compassが生成するものだからです。

私はそれをしたい:

  1. その内容に基づいて高さを決めます
  2. 背景が親全体を埋めるように「列」を伸ばします
  3. 列のコンテンツを垂直方向に中央揃えにします。

そのようです:

悪いフレックスボックス

jsbinで見てください

問題は、上記のリストの要件 2 と要件 3 が衝突することです。コンテンツを垂直方向に中央揃えにすることはできますbox-align: centerが、背景を伸ばすには を使用する必要がありますbox-align: stretch

上記の例では、私が使用しています

#div1 { display: table; height: 150px; }
#div1 > div { display: table-cell; vertical-align: middle; }

問題は、3列目(lime)の内容で高さが決まってしまうので、固定の高さを指定できないことです。

javascriptなしでこれを解決する方法はありますか? ネストされたフレックスボックス (試してみましたが、動作しません)? 表示: 上記の表?

4

1 に答える 1