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的基础。通过使用％，您可以非常接近。您可以使用px设置初始宽度，它仍然是＆＃34;响应＆＃34;直到你达到设定的最小宽度。

在子元素上：

div {
    flex-basis:40%;
}

以下是W3

Answer 2

为什么不将孩子的宽度设置为100％？如果您需要将按钮置于孩子的中心，您只需添加：

display: flex;
justify-content: center;

同时从输入中删除width: 100%。

居中最大宽度不显示流动：flex

2 个答案: