CSS Display Flex。我不能得到它的工作

Question

好吧我有3個div外部div是一列。所有3個div高度均由其內容動態生成。

<div class="outer" style="display:flex; flex-direction:column; float:left;"> 
    <div class="text 1" style="float:left; flex:1; background:red;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum ex, gravida vitae erat nec, ultricies sollicitudin magna. Nulla facilisi. Nulla gravida congue viverra. Vivamus maximus lacus dolor, sit amet vestibulum orci maximus tristique. Nam non metus nisl. Mauris gravida magna sed dolor venenatis malesuada. Sed in rutrum erat. Sed dictum est neque, sit amet consequat dolor dictum eget. Fusce sit amet dolor orci. Curabitur tempus vel erat ac dictum. Proin vel congue velit. Nam venenatis erat neque, at convallis mauris eleifend ultrices. In hac habitasse platea dictumst</p></div> 
    <div class="text 2" style="float:left; flex:1; background:blue;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum ex, gravida vitae erat nec, ultricies sollicitudin magna.</p></div> 
</div> 

我已經申請內嵌CSS顯示了Flex。我在Firefox工作，但是我有跨瀏覽器的CSS，但我只是專注於讓它在Firefox中工作，並首先理解這一點。

的什麼即時試圖在這裏完成我們的目標是使文本2完全相同的高度文本1.

進出口新的這整個柔性的東西，IM相當肯定即時通訊做這完全錯了，我一直讀文章幾個小時，我嘗試的一切都無法工作。所以即時通訊假設我明白這一切都是錯的

林不知道是否重要，但這是在wordpress內完成的。還有一切都是左移的

我很抱歉，如果這是微不足道的，但即時消失，並且Stackoverflow永遠不會讓我失敗。任何幫助將不勝感激。

Answer 1

你離你想要做的不遠。請注意，我從類名中刪除了空格，因爲空格是多個類的分隔符。 .1和.2是無效的類名稱。

您應該使用flex-direction: row;，因爲您希望佈局水平排列。我使用了flex速記屬性來達到所需的結果，該結果代表flex-grow,flex-shrink和flex-basis。

.outer 
 
{ 
 
    display: flex; 
 
    flex-wrap: row nowrap; 
 
} 
 

 
.text1, .text2 
 
{ 
 
    flex: 1 0; 
 
} 
 

 
.text1 
 
{ 
 
    background-color: gray; 
 
} 
 

 
.text2 
 
{ 
 
    background-color: darkgray; 
 
}

<div class="outer"> 
 
    <div class="text1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum ex, gravida vitae erat nec, ultricies sollicitudin magna. Nulla facilisi. Nulla gravida congue viverra. Vivamus maximus lacus dolor, sit amet vestibulum orci maximus tristique. Nam non metus nisl. Mauris gravida magna sed dolor venenatis malesuada. Sed in rutrum erat. Sed dictum est neque, sit amet consequat dolor dictum eget. Fusce sit amet dolor orci. Curabitur tempus vel erat ac dictum. Proin vel congue velit. Nam venenatis erat neque, at convallis mauris eleifend ultrices. In hac habitasse platea dictumst</p></div> 
 
    <div class="text2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum ex, gravida vitae erat nec, ultricies sollicitudin magna.</p></div> 
 
</div>

也沒有必要對撓性元件使用float。但是，應該沒有任何效果什麼那麼，作爲w3c的：

float和clear不會產生浮動或彎曲項目的間隙，和 不要把它亂流。