Question

看看这个https://codepen.io/techsin/pen/JWQgoM

//html
<div class="nav"> a \ b \ c</div>
<div class="box"> no text</div>

//css
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: stretch;
}

.box {
  max-width: 800px;
  padding: 30px;
  background-color: gray;
  flex-grow:1; 
}


.nav {
  padding: 30px;
  background-color: purple;
  text-align: center;
  color: #fff;
}

我希望框像块元素一样展开，但不会扩展到超出最大宽度，仍然居中。

如果我将align-items设置为在身体上拉伸，则框会进行扩展但是它会向左对齐，如果设置边距自动或对齐项目到中心，则框会停止尝试尽可能多地填充宽度。

我只想让框扩展到800像素，但是当窗口大小改变时，它的宽度也会下降，就像任何常规块元素的宽度默认行为一样。

使用flexbox的全部理由是让盒子也覆盖剩余高度。

Answer 1

提供box width: 100%;，margin: 0 auto;和box-sizing: border-box;，以便填充包含在其宽度中

http://m.me/

Stack snippet

* {
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.box {
  max-width: 800px;
  width: 100%;
  padding: 30px;
  background-color: gray;
  flex-grow:1;
  margin: 0 auto;
  box-sizing: border-box;
}

.nav {
  padding: 30px;
  background-color: purple;
  text-align: center;
  color: #fff;
}

<div class="nav"> a \ b \ c</div>
<div class="box"> no text</div>

如何使用Flexbox拉伸和居中项目？

1 个答案: