小编Mar*_*pel的帖子

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

HTML

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

社会保障局

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

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

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

有没有办法在我缺少的 CSS 中做到这一点？请注意，元素不能始终只有 350 像素宽 - 它还必须像示例小提琴中那样响应水平页面调整大小。

小提琴：https : //jsfiddle.net/1uqpxn8L/1/