Div Div下的CSS Div

我在設置div出現在另一個div下（像他們通常那樣）有很多麻煩。Div Div下的CSS Div

我在使用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%或改變顯示類，不會讓兩個div顯示垂直，它們並排顯示。我發現刪除valign-wrapper類將工作，但我的項目將顯然出現在網站的頂部...

如果有人遇到同樣的問題，我將不勝感激幫助！

2016-03-21 Jo Colina

'顯示：flex'增加了一些魔術，但你誰需要管理這種與兒童屬性的魔法。如果你不知道flexbox是如何工作的，請使用另一種技術（inline-block，float，table-cell等） –

你想要一個'dot'，'.valign-wrapper' btw – Gintoki

我的不好，但是點在這裏只是失蹤，而不是在實際的代碼... @MarcosPérezGude我使用的是一個css框架，沒有多少我可以做 –

您需要添加屈曲方向：

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

這樣，柔性項目定位爲一列。另外，如果您需要flex-direction: row;（默認）去，你可以使用

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

仍維持該行的風格，但有你的兩個項目包，並最終定位在彼此之上。

即使職位是從2013年開始，它仍然教導Flexbox，就神奇在一個不錯的方式，我可以只推薦大家讀一下：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％'做了訣竅！ –

回答