2016-05-11 9 views
3

div3の項目をdisplay:flex divの下に整列/スタックしようとしています。私がそれを管理できる唯一の方法は、上に4番目のdivを追加することです& javascript/jqueryを使用して、それらの3つの項目を下に押して動的に高さを調整します。フレックスコンテナの項目をフレックスコンテナの底にフレックスします

javascript/jqueryを使用せずにこれを行うための純粋なCSS3の方法はありますか?ありがとう

ここにはfiddleです。私が整列したい/底に積み重ねたい3つのdivは、.searchForm,.tweetForm.myMsgです。私は現在、.fudgeBoxを上に置くことに頼って、それらを下に押し下げています。

答えて

2

これを追加します。

.searchForm { margin-top: auto; } 

あなたは、スペーサのdivと、すべてのJSをスクラップすることができます。

代替案はフレックスコンテナ(.sideRight)のjustify-content: flex-endです。

ここjustify-contentauto余白詳細については、こちらをご覧ください:代わりにalign-itemsのご.sideRight CSSの使用justify-contentMethods for Aligning Flex Items

+1

ありがとう、マイケル。これはエレガントです。マジックのように動作します!悲しいかな、私のjsfiddleはブートストラップ4を使用している私の真のコードを全く表現していませんでした。私の本物の.sideRightには、。sideRightが高さ:100%を取るのを防ぐと思われるclass col-md-4もあります。 .sideRght内の要素の合計これは、.searchForm {margin-top:auto; }働くことから。だから、私はまだ高さを動的に調整するためにjqueryを必要とします。私はfudge divを使用する代わりに.searchFormのマージントップを調整することに切り替えました。 – rockhammer

+0

ええと、ブートストラップとフレックスボックスは常に良いとは言えません。あなたのCSSに '!important'を適用してブートストラップをオーバーライドすることもできますが、ヒットしてしまいます。幸運:-) –

+1

私は理由を理解しました.searchForm {margin-top:auto; }は効力を発揮しませんでした。ブートストラップの固定フッターテンプレートは、高さ:100%の代わりに100%の高さを使用します。定義を読んで、これらの2つは同じ効果を与えるはずですが、それはしません。最小高さを高さに置き換えると、{margin-top:auto; }が働きます。 – rockhammer

1

flex-direction: columnを使用すると、フロー方向が垂直に変わりますので、justify-...align-...の使用は基本的に切り替わります。

+0

ありがとう、タイラー、迅速な対応 – rockhammer

関連する問題