2017-11-25 186 views
0

的線我不太清楚,如果這是可能的CSS,但沒有找到那個方向什麼,但我會搏一搏:CSS的Flex寬度上的文本

在(Flex的) - 容器我想要多個(2-3)框/列的文本。每一列都是它自己的文章,它有自己的標題,所以它不是一個文本繼續到下一列。

但是,我希望所述列的寬度是靈活的,以便沒有列浪費空白空間直到結束。如果一列有空行,它會嘗試減小寬度以爲自己創建更多換行符並填充該空白,而其他框獲得更多寬度以減少文本行數。

在任何情況下,所有列都應嘗試獲取相同數量的文本行,從而通過增加/減少寬度空間來獲得相同的內容高度。

/編輯:一個代碼示例,我迅速做了基於https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flex-wrap_nowrap8

正如你將看到,無論是柔性盒將保持50%的寬度,即使其中一個比另一個更加豐滿。我希望他們自動重新排列寬度以避免文本下面的空白空間。寬度較小的第一個盒子會有更多的換行符,而寬度較大的第二個則會有較少的換行符。目標是儘可能少地區分文本行數。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.flex-container { 
    display: flex; 
    background-color: DodgerBlue; 
} 

.flex-container>div { 
    background-color: #f1f1f1; 
    margin: 10px; 
    padding:20px; 
    font-size: 7px; 
} 
</style> 
</head> 
<body> 

<div class="flex-container"> 
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum..</div> 
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum..Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 
</div></body></html> 
+0

後,你已經嘗試過的代碼。當我們能夠重現問題時,我們可以更有效地幫助您。 –

+0

我添加了一個代碼示例來說明問題,但我還沒有嘗試過任何解決方法,因爲我不知道從哪裏開始(或者如果可能的話)。 –

+0

但你的問題中的代碼示例已經這樣做了:https://jsfiddle.net/sofybcge/ – LGSon

回答

0

基於flex-basis及其auto,它具有改變其含義的歷史,在這裏看到:

你的情況,你可以使用max-content(雖然前綴)使火狐行爲

堆棧片段

.flex-container { 
 
    display: flex; 
 
    background-color: DodgerBlue; 
 
} 
 

 
.flex-container>div { 
 
    flex-basis: -moz-max-content;  /* fix for Firefox */ 
 
    
 
    background-color: #f1f1f1; 
 
    margin: 10px; 
 
    padding:20px; 
 
    font-size: 7px; 
 
}
<div class="flex-container"> 
 
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum..</div> 
 
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum..Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 
 
</div>

+0

工作完美。 –

+0

@lainwired謝謝...和任何人都可以接受,只需點擊上方/下方箭頭下面的灰色複選標記 – LGSon