css - 居中最大宽度不随显示 :flex 流动

Question

要使用 display: block 居中元素，人们使用 margins: auto。如果我将 max-width 设置为需要居中的子项，并且它周围有足够的空间，它将根据需要尽可能多地流动到 max-width (取决于其内容).但是，如果我将父元素的 display 属性更改为 flex，它就不会再占用所有可用空间了。我确实需要使用 max-width，因为我希望元素在小屏幕上缩小。

这是 jsfiddle .单击按钮会将父级上的 display: flex 替换为 display: block。我希望 flex 上的绿色空间在 max-width 上尽可能流畅，就像 display:block

一样

编辑:我也想使用 flex-direction: column

$('input').click(function() {
  var curDisplay = $('#parent').css('display');
  if (curDisplay == 'block') {
    $('#parent').css('display', 'flex');
    $('input').val('flex');
  } else {
    $('#parent').css('display', 'block');
    $('input').val('block');
  }
})

#parent {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: red;
  height: 50px;
}
#child {
  max-width: 300px;
  background-color: green;
  height: 50px;
  margin: auto;
}
input {
  width: 100%:
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="child">
    <input type="button" value="Click Me!" />
  </div>
</div>

Answer 1

我认为您正在寻找 flex-basis。通过使用 %，您可以非常接近。您可以使用 px 来设置初始宽度，如果您设置了它，它仍然会“响应”直到您达到最小宽度。

在子元素上:

div {
    flex-basis:40%;
}

这是 W3