Question

我想要实现 a'reponsive'框（具有固定宽度），其中包含徽标（具有固定宽度）和信息栏（取主箱的剩余宽度）。因此，使用calc()来显示信号栏的宽度。因为如果变小，信息栏将无用，它还包含min-width。

这很有效，直到屏幕宽度变得很小，以至于flexbox必须分成两行。现在我的设计有两个问题，我想解决：

1）我希望包裹行1中的徽标水平居中

2）我希望信息棒占据包裹行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}

Answer 1

您需要为信息框启用自动增长功能，以便填充剩余空间，并使整个内容居中。

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

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

您的整个代码可能看起来像this。

CSS flexbox破坏行为

1 个答案: