CSS Flexbox的破壞行爲

我想實現一個「reponsive」框（有固定寬度）含有標誌（有固定寬度）和一個信息欄（以主箱的其餘部分的寬度）。因此信息條寬度爲calc()因爲如果變小，信息條就沒用了，它也包含一個min-width。CSS Flexbox的破壞行爲

這個效果很好，直到屏幕寬度變得如此之小以至於Flexbox必須分成兩行。現在有在我的設計中有兩個問題，我想解決：

1）我想在總結第1行的標誌，水平居中

2）我想要的信息欄取包裹的整個寬度-ROW 2

（在我的解決方案在所述第一渦卷排和第二包裹式行中的信息欄中的左邊的標誌枝缺乏標誌，這我減去的大小。）

有沒有使用flexbox的解決方案？

代碼（HTML）：

<!DOCTYPE html> 
<head> 
<link rel=stylesheet type="text/css" href="test.css"> 
<meta charset="utf-8"> 
<meta name=viewport content="width=device-width, initial-scale=1"> 
<title>Test</title> 
</head> 
<body> 
<div class="box wrap" align="center"> 
<div class="logo">logo</div> 
<div class="infobar">infobar</div> 
</div> 
</body> 
</html>

碼（test.css）：

div.wrap{margin:0 auto;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;-webkit-flex-wrap:wrap;display:flex;flex-wrap:wrap} 
div.box{min-height:100px;max-width:1200px} 
div.logo{width:200px;min-height:128px;margin-bottom:10px;margin-right:10px;background-color:#456789} 
div.infobar{width:calc(99% - 215px);min-width:320px;min-height:128px;text-align:left;padding-left:3px;padding-top:3px;margin-bottom:10px;background-color:#ABCDEF}

來源

2017-07-31 Wooz

您需要啓用自動增長到你的信息框，所以它填充剩餘空間，和定心你的全部內容。

div.infobar { 
    flex-grow: 1; /* Fill the remaining space */ 
} 

div.wrap { 
    justify-content: center; /* Center whole content */ 
}

您的整個代碼可能看起來像this。

來源

2017-07-31 11:29:05 Aer0

非常好的答案：清晰和正確。非常感謝你。 – Wooz

CSS Flexbox的破壞行爲

回答

相關問題