Divの下にあるCSS Div

divが正常にそうであるように別のdivの下に表示されるように設定するのに苦労します。Divの下にあるCSS Div

I'musing MaterializeCSS。次のように私のレイアウトは次のとおりです。

<div class="container valign-wrapper"> 
    <div class="customClass"></div> 
    <div class="customClass"></div> 
</div>

とCSS：

.valign-wrapper{ 
    display: flex; 
    align-items: center; 
} 

.customClass{ 
    margin: 0 auto; 
    /* text and font css */ 
}

しかし、たとえwidth:100%を追加したり、表示クラスを変更すると2つのdiv要素が縦に表示されことはありません、彼らは並んで表示されます。 valign-wrapperクラスを削除すると機能することがわかりましたが、私のアイテムは明らかにサイトの上部に表示されます...

誰かが同じ問題に遭遇した場合、私は助けていただければ幸いです！

2016-03-21 Jo Colina

'表示：flex'は、いくつかの魔法が追加されますが、あなたは、このような魔法を子供の財産で管理する必要がある人。 flexboxの仕組みがわからない場合は、別のテクニック（インラインブロック、フロート、テーブルセルなど）を使用してください。 –

あなたはforge a dot、 '.valign-wrapper' btw – Gintoki

私の悪いですがドット実際のコードではなくちょうどここに紛失していました... @ MarcosPrezGude私はCSSフレームワークを使用していますが、あまりできません。 –

あなたはフレックス方向を追加する必要があります。

.valign-wrapper { flex-direction: column; }

その方法は、フレックス項目が列として配置されています。あなたはflex-direction: row;（デフォルト）と一緒に行く必要がある場合は別の方法として、あなたはまだ行のスタイルを維持するが、あなたの2つの項目がラップし、最終的には互いの上に位置している

.valign-wrapper { flex-wrap: wrap; } 
.customClass { flex-basis: 100%; }

を使用することができます。

ポストは2013年からですが、それはまだ良い方法でフレキシボックスの魔法を教え、私はちょうどそれについて読むために皆をお勧めすることができます：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

2016-03-21 14:26:12 Paul

これは、または単にコンテナからvalign-wrapperクラスを削除するだけです。 – FLX

ありがとう！ 'flex-wrap：wrap'と' flex-basis：100％ 'を追加することがトリックでした！ –

答えて