だから私はフレックスボックス、より正確にはボックス(display: box
)だけを持っています。それはSass Compassが生成するものだからです。
私はそれをしたい:
- その内容に基づいて高さを決めます
- 背景が親全体を埋めるように「列」を伸ばします
- 列のコンテンツを垂直方向に中央揃えにします。
そのようです:
問題は、上記のリストの要件 2 と要件 3 が衝突することです。コンテンツを垂直方向に中央揃えにすることはできますbox-align: center
が、背景を伸ばすには を使用する必要がありますbox-align: stretch
。
上記の例では、私が使用しています
#div1 { display: table; height: 150px; }
#div1 > div { display: table-cell; vertical-align: middle; }
問題は、3列目(lime)の内容で高さが決まってしまうので、固定の高さを指定できないことです。
javascriptなしでこれを解決する方法はありますか? ネストされたフレックスボックス (試してみましたが、動作しません)? 表示: 上記の表?