Question

我有一个元素想要（跨轴）居中，但即使内容太少也可以“增长”到名义尺寸，但是当页面宽度小于350px时也“收缩”宽。

HTML

SalariedEmployee

SCSS

<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;可以使宽度达到350px，但这似乎抵消了.child中的align-items: center;

有没有办法在我丢失的CSS中做到这一点？请注意，该元素不能一直保持350px的宽度-它也必须像示例小提琴一样响应水平页面大小的调整。

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

Answer 1

已更新

我认为您应该使用justify-content来使孩子保持居中对齐。

请注意，将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/

Answer 2

您可以执行以下操作。

HTML

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

SCSS

.parent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  .child {
    width: 350px;
    @media(max-width: 350px) {
       width: 100%;
    }
  }
}

.parent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background-color: red;
}

.child {
  width: 350px;
  background-color: yellow;
}

@media(max-width: 350px) {
  .child { width: 100%; }
}

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

所以发生了什么事，我正在使用媒体查询来根据浏览器的宽度更改子项的宽度。

Answer 3

您只需要删除 flex-direction属性。然后它按预期工作。但是，如果要以列方式显示子元素，则会出现问题。我检查时， flex-direction 属性或 flex-flow：column 值会导致收缩问题。

如何对齐项目：居中，对齐自身：伸展？

3 个答案: