2016-05-17 191 views
2

我看到過像我這樣的幾個問題,但他們都沒有成功回答。我的問題可能很簡單,但我沒有得到我的錯誤。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>

回答

2

這裏沒有什麼意義可以再次定義兒童爲柔性容器 - 它們中沒有任何元素(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/

+0

謝謝:) - 幫我 – RoetzerBub

+0

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

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

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

+1

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

+0

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

0

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

.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-growflex-shrink,和flex-basis

+0

謝謝史蒂夫:) – RoetzerBub

0

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

從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; 
}