如何制作居中、动态宽度的 flexbox答案

【问题标题】：How to make centered, dynamic-width flexbox如何制作居中、动态宽度的 flexbox
【发布时间】：2017-10-16 14:14:01
【问题描述】：

此标记应生成一个高 30 像素、宽 600 像素、居中的框。但它会缩小盒子，使其没有宽度（或者如果有内容，它会缩小到最小内容宽度）。想知道如何使居中的框为 600 像素，但在较小的窗口尺寸下响应。

* {
  position: relative;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
}

div {
  display: flex;
}

body > div {
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  border: 1px solid orange;
}

body > div > div {
  max-width: 600px;
  border: 1px solid black;
}

body > div > div > div {
  border: 1px solid blue;
  background: red;
  height: 30px;
}

<div>
  <div>
    <div></div>
  </div>
</div>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

请试试这个。将width:100% 分配给body > div > div 和body > div > div > div 类。

* {
  position: relative;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
}

div {
  display: flex;
}

body > div {
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  border: 1px solid orange;
}

body > div > div {
  max-width: 600px;
  border: 1px solid black;
  width:100%;
}

body > div > div > div {
  border: 1px solid blue;
  background: red;
  height: 30px;
  width:100%;
}

<div>
  <div>
    <div></div>
  </div>
</div>

【讨论】：

【解决方案2】：

这是弹性项目的默认行为，与内容一样宽，类似于内联块。

原因是它的默认flex-grow 值，即0，并告诉它不要填充剩余空间。

将flex-grow: 1 添加到应填充其父项的每个级别的弹性项目。

* {
  position: relative;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
}

div {
  display: flex;
}

body > div {
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  border: 1px solid orange;
}

body > div > div {
  max-width: 600px;
  border: 1px solid black;
  flex-grow: 1;                    /*  added  */
}

body > div > div > div {
  border: 1px solid blue;
  background: red;
  height: 30px;
  flex-grow: 1;                    /*  added  */
}

<div>
  <div>
    <div></div>
  </div>
</div>

【讨论】：

【解决方案3】：

请允许我将代码简化为基本组件。您有一个设置为display:flex 的div.container。在里面你有一个div，你想根据弹性参数进行调整。内部 div 设置为根据其容器增长和缩小：

flex: 1 1 auto; /* shorthand for flex-grow, flex-shrink, flex-basis */

它还设置为具有max-width:600px 并在页面中居中，margin-left 和margin-right 设置为auto。我相信这个构造符合您的要求。

div.container {
  display: flex;
  border: 1px solid orange;
}

div.container div {
  flex: 1 1 auto;
  border: 1px solid blue;
  background: red;
  height: 30px;
  margin: 0 auto 0 auto;
  max-width: 600px;
}

<div class="container">
  <div></div>
</div>

【讨论】：