Flexboxs兒童溢出父母

我看到過像我這樣的幾個問題，但他們都沒有成功回答。我的問題可能很簡單，但我沒有得到我的錯誤。Flexboxs兒童溢出父母

我在彼此中使用幾個柔性盒。當我改變瀏覽器大小時，它應該調整大小相同的方式。但是，在一個點兒童滿溢父母柔性盒 - 醜陋

因爲我沒有找到我的錯誤，我開始了一個新的HTML文檔 - 我仍然有錯誤。「遊戲盒」的孩子們沒有按我的意願去做。

這裏有一個小提琴：Live-Demo

謝謝你的幫助 - RoetzerBub

html , body, main { 
 
    margin: 0; 
 
    padding: 0; 
 
    min-height: 100%; 
 
    min-width: 100%; 
 
} 
 

 
body{ 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 
header, footer{ 
 
    display: flex; 
 
    min-width: 100%; 
 
    justify-content: center; 
 
} 
 
header{ 
 
    flex-shrink: 0; 
 
    background-color: #cc0000; 
 
    color: white; 
 
    z-index: 10; 
 
    margin-bottom: 10px; 
 
} 
 

 
main{ 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
footer{ 
 
    background-color: #444444; 
 
    color: white; 
 
    flex-shrink: 0; 
 
    z-index: 10; 
 
    margin-top: 10px; 
 
} 
 
/*as*/ 
 
.gamebox{ 
 
    display: flex; 
 
    flex-direction: row; 
 
    min-width: 30%; 
 
    max-width: 45%; 
 
    border: 2px solid #b30000; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 

 
.gb_left, .gb_center, .gb_right{ 
 
    margin: 2%; 
 
    justify-content: space-around; 
 
    background-color: yellow; 
 
} 
 

 
.gb_left{ 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
    flex-grow: 1; 
 
} 
 

 
.gb_right{ 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
    flex-grow: 1; 
 
    
 
} 
 

 
.gb_center{ 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
}

<html> 
 
    <head> 
 
     <title>TODO supply a title</title> 
 
     <meta charset="UTF-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
     <link rel="stylesheet" href="flexstyle.css"> 
 
    </head> 
 
    <body> 
 
     <header>HEADER</header> 
 
     <main> 
 
      
 
      <div class="gamebox"> 
 
       <div class="gb_left"> 
 
        FLAG 
 
        TEAM-A 
 
       </div> 
 
       <div class="gb_center"> 
 
        type<br/> 
 
        SCORE<br/> 
 
        date 
 
       </div> 
 
       <div class="gb_right"> 
 
        TEAM-B 
 
        FLAG 
 
       </div> 
 
       
 
      </div> 
 
     
 
     </main> 
 
     <footer>FOOTER</footer> 
 
    </body> 
 
</html>

來源

2016-05-17 RoetzerBub

這裏沒有什麼意義可以再次定義兒童爲柔性容器 - 它們中沒有任何元素（div或span），只有文本（即沒有任何功能可以作爲flex項目）。

下面撥弄我刪除了這一切，並使用下面的CSS設置：

.gamebox{ 
    display: flex; 
    flex-direction: row; 
    min-width: 30%; 
    max-width: 45%; 
    border: 2px solid #b30000; 
    justify-content: space-between; 
    align-items: center; 
} 

.gb_left, .gb_center, .gb_right{ 
    margin: 2%; 
    background-color: yellow; 
    min-width: 29%; 
    word-wrap: break-word; 
}

的最後一個可以確保當一個字長於其容器的寬度，它的分解。

這是你的提琴的叉：https://jsfiddle.net/o6wxy5z7/

來源

2016-05-17 22:34:05 Johannes

謝謝:) - 幫我 – RoetzerBub

@RoetzerBub這是走的方式，我可以看到這是最好的回答如我所說w3c規範說只有解決方案是設置最小寬度 –

@media (max-width:400px) { 
    .gamebox { 
    flex-direction: column; 
    } 
}

防止溢出ND與響應式設計元素保持聯繫

來源

2016-05-17 22:28:13

是的你是對的，它的工作，但我希望遊戲箱內聯，即使你在移動設備上。 – RoetzerBub

默認情況下，flex項目不會縮小到最小內容大小（最長字或固定大小元素的長度）以下。要更改此設置，請設置最小寬度或最小高度屬性。（見§4.5隱含的最小尺寸的Flex項目。）這是什麼w3c規範說 –

爲了避免元素溢出的容器，你需要讓他們縮小和增長，例如：

.gb_left{ display: flex; justify-content: space-between; align-items: center; flex-grow: 1; }

可以改爲：

.gb_left{ display: flex; justify-content: space-between; align-items: center; flex: 1 1 auto; }

使用速記分配flex-grow，flex-shrink，和flex-basis。

來源

2016-05-17 22:33:48

謝謝史蒂夫:) – RoetzerBub

首先，有你正在使用柔性的孩子四種風格不屬於他們。

從flex兒童（.gb-left，.gb-center和.gb-right）中刪除這些內容。）：

顯示
證明內容
對齊項
彎曲方向

這裏是什麼應該被分配到一個很好的文章誰：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

現在爲您的孩子不縮水的問題過去ac當然，文本會盡可能多地包裝起來，然後當文本儘可能小時，文本就會打開盒子的寬度。

有一個簡單的方法可以解決這個問題，儘管這將意味着切斷文本。

只分配溢出：隱藏;給孩子們。

.gb_left, .gb_center, .gb_right { 
    overflow: hidden; 
    margin: 2%; 
    background-color: yellow; 
}

來源

2016-05-17 22:36:09 haltersweb

Flexboxs兒童溢出父母

回答

相關問題