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

Question

此标记应生成一个宽度为600px，居中的30px高框。但相反，它缩小了盒子，因此它没有宽度（或者如果有内容，它会收缩到最小内容宽度）。想知道如何制作这样的中心框是600px，但是在较小的窗口尺寸下响应。

* {
  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>

Answer 1

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

＆＃13;

＆＃13;

* {
  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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

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

* {
  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>

Answer 3

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

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

它也设置为max-width:600px，并以页面为中心，margin-left和margin-right设置为auto。我相信这种结构符合您的要求。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;