在flexbox中包裝文本，但爲不同長度的文本保留相對列寬

我使用flexbox作爲Wordpress網站。兩欄，小孩1應該是頁面的75％，小孩2的25％。然而，在兒童1中使用一個小句子時，它會將一個較大的文本推到1到100％的頁面寬度。長文本可能不會將div推到100％，而是在div內包裝。看下面的jsfiddle例子。我該如何解決這個問題？相當新的在這個。 TNX！在flexbox中包裝文本，但爲不同長度的文本保留相對列寬

http://jsfiddle.net/luchtrat/jnys3u5p

body *{border: 1px solid red;} /* just to preview what's happening */ 
 

 
#parent { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-flow: row wrap; 
 
    flex-flow: row wrap; 
 
    padding: 10px; 
 
} 
 
#child_1 { 
 
    flex-grow: 2; 
 
} 
 
#child_2 { 
 
    flex-grow: 1; 
 
}

<div id="parent"> 
 
    <div id="child_1"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam dapibus volutpat. Proin suscipit massa at ipsum semper, et pretium ante bibendum. Vivamus justo erat, aliquet maximus turpis quis, sagittis tempor lectus. Nullam eleifend, nisi 
 
    vitae condimentum elementum, arcu sapien finibus nisl, sit amet euismod nibh felis quis turpis. Fusce nec egestas sapien, non ultricies ligula. Aliquam ac libero elementum, rhoncus massa quis, posuere massa. 
 
    </div> 
 
    <div id="child_2">Fusce nec egestas sapien.</div> 
 
</div> 
 
<div id="parent"> 
 
    <div id="child_1">Lorem ipsum dolor sit amet.</div> 
 
    <div id="child_2">Fusce nec egestas sapien.</div> 
 
</div>

來源

2017-02-01 Jeroen Pede

您的代碼更好flex:3在哪？ – Option

在你的CSS中使用'flex-wrap：wrap;'。 – Svekke

已添加代碼和鏈接。 –

不要重複ID。每個頁面的ID應該是唯一的。使用類來代替：
使用簡單：flex:2;和flex:1分別爲您child_元素
或者如果你想獲得75% → 25%根據需要

body * {border: 1px solid red;} 
 

 
.parent { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    padding: 10px; 
 
} 
 
.child_1 { 
 
    flex: 3; /* "75%" */ 
 
} 
 
.child_2 { 
 
    flex: 1; /* "25%" */ 
 
}

<div class="parent"> 
 
    <div class="child_1"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam dapibus volutpat. Proin suscipit massa at ipsum semper, et pretium ante bibendum. Vivamus justo erat, aliquet maximus turpis quis, sagittis tempor lectus. Nullam eleifend, nisi 
 
    vitae condimentum elementum, arcu sapien finibus nisl, sit amet euismod nibh felis quis turpis. Fusce nec egestas sapien, non ultricies ligula. Aliquam ac libero elementum, rhoncus massa quis, posuere massa. 
 
    </div> 
 
    <div class="child_2">Fusce nec egestas sapien.</div> 
 
</div> 
 
<div class="parent"> 
 
    <div class="child_1">Lorem ipsum dolor sit amet.</div> 
 
    <div class="child_2">Fusce nec egestas sapien.</div> 
 
</div>

來源

2017-02-01 10:29:03

這真的很奇怪 - 將上面的代碼添加到我的wordpress php文件時，它不起作用。 –

@JeroenPede是否添加了所有'-vendor-'前綴？（爲了簡單起見，我刪除了它們） –

是的，我做過。當在jsfiddle中試用你的代碼作爲測試時，它運行良好。當複製粘貼在我的wordpress css＆php文件中時，它不起作用。 –

在flexbox中包裝文本，但爲不同長度的文本保留相對列寬

回答

相關問題