html - 如何对齐元素 : center AND align-self: stretch?

Question

我有一个元素我想(横轴)居中，但即使内容太少也会“增长”到标称大小，但当页面宽度小于 350px 时也会“收缩”宽。

HTML

<div class="parent">
  <div class="child">
    Some content
  </div>
</div>

SCSS

.parent {
  display: flex;
  flex-direction: column;
  align-items: center;

  .child {
    max-width: 350px; 
    align-self: stretch;
  }
}

将 align-self: stretch; 添加到 .child 可以使其宽度达到 350px，但它似乎否定了 align-items: center ; 在 .parent

有没有办法在我缺少的 CSS 中执行此操作？请注意，该元素不能始终只有 350 像素宽 - 它还必须响应水平页面大小调整，就像它在示例 fiddle 中所做的那样。

fiddle :https://jsfiddle.net/1uqpxn8L/1/

Answer 1

已更新

我认为您应该使用 justify-content 将 child h 对齐到中心。

请注意，当您将 display:flex 属性应用于父级时，您应该将 flex 属性应用于子级。

.parent {
  background: yellow;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.parent .child {
  background: black;
  color: white;
  text-align: center;
  flex: 1 1 auto;
  width: 100%;
  max-width: 350px;
}

<div class="parent">
  <div class="child">
    I should be 350px wide
    <br> and centered in the yellow
    <br> unless the page gets smaller,
    <br> in which case I should have
    <br> 10px padding on either side.
  </div>
</div>

请在此处查看结果，希望这是您的意思:https://jsfiddle.net/1uqpxn8L/11/