css 使弹性项目采用内容宽度，而不是父容器的宽度

cwtwac6a 于 2023-03-09 发布在其他

关注(0)|答案(4)|浏览(155)

我有一个包含display: flex的容器<div>，它有一个子容器<a>。
我怎样才能使孩子显示为“内联”？
具体地说，如何使子对象的宽度由其内容决定，而不扩展到父对象的宽度？

我尝试过

我将孩子设置为display: inline-flex，但它仍然占据了整个宽度。我也尝试了所有其他显示属性，但没有任何效果。

示例：

.container {
  background: red;
  height: 200px;
  flex-direction: column;
  padding: 10px;
  display: flex;
}
a {
  display: inline-flex;
  padding: 10px 40px;
  background: pink;
}

<div class="container">
  <a href="#">Test</a>
</div>

http://codepen.io/donpinkus/pen/YGRxRY

css

来源：https://stackoverflow.com/questions/40141163/make-flex-items-take-content-width-not-width-of-parent-container

4条答案

按热度按时间

3vpjnl9f1#

在容器上使用align-items: flex-start，或在弹性项目上使用align-self: flex-start。
不需要display: inline-flex。
Flex容器的初始设置为align-items: stretch。这意味着Flex项目将沿着横轴扩展以覆盖容器的整个长度。
align-self属性的作用与align-items相同，不同之处在于align-self应用于 *flex项 *，而align-items应用于 *flex容器 *。
默认情况下，align-self继承align-items的值。
由于容器是flex-direction: column，横轴是水平的，align-items: stretch会尽可能地扩展子元素的宽度（column设置也是display: inline-flex不起作用的原因）。
您可以在容器上使用align-items: flex-start（由所有弹性项目继承）或在项目上使用align-self: flex-start（仅限于单个项目）覆盖默认值。
在此处了解有关沿着 * 横轴 * 伸缩对齐的更多信息：

How does flex-wrap work with align-self, align-items and align-content?

在此处了解有关沿着 * 主轴 * 伸缩对齐的更多信息：

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

赞(0）回复(0）举报 2023-03-09

0tdrvxhp2#

除了align-self之外，您还可以考虑使用自动边距，其作用几乎相同

.container {
  background: red;
  height: 200px;
  flex-direction: column;
  padding: 10px;
  display: flex;
}
a {
  margin-right:auto;
  padding: 10px 40px;
  background: pink;
}

<div class="container">
  <a href="#">Test</a>
</div>

赞(0）回复(0）举报 2023-03-09

4uqofj5v3#

width: min-content也会产生相同的结果。IE11中不支持，如果这对您很重要：https://caniuse.com/mdn-css_properties_width_min-content

赞(0）回复(0）举报 2023-03-09

pvcm50d14#

截至2023年，您还可以：
width: -webkit-fill-available

赞(0）回复(0）举报 2023-03-09

我来回答

css 使弹性项目采用内容宽度，而不是父容器的宽度

4条答案

相关问题

热门标签

最新问答