首页 文章

使flex项目占用内容宽度，而不是父容器的宽度

提问于
浏览 次
68

我有一个容器 <div> 与 display: flex . 它有一个孩子 <a> .

如何让孩子显得“内联”？

具体来说，如何使孩子的宽度由其内容决定，而不是扩展到父母的宽度？

What I tried:

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

Example:

.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

html css css3 flexbox

1 回答

  • 126

    在容器上使用 align-items: flex-start ，或在flex项目上使用 align-self: flex-start .

    不需要 display: inline-flex .

    Flex容器的初始设置是 align-items: stretch . 这意味着柔性物品将扩展以沿着横轴覆盖容器的整个长度 .

    align-self 属性与 align-items 执行相同的操作，但 align-self 适用于弹性项目，而 align-items 适用于弹性容器 .

    默认情况下， align-self 继承 align-items 的值 .

    由于您的容器是 flex-direction: column ，因此横轴是水平的， align-items: stretch 正在尽可能多地扩展子元素的宽度 .

    您可以使用容器上的 align-items: flex-start 覆盖默认值（由所有弹性项目继承）或项目上的 align-self: flex-start （仅限于单个项目） .

    在此处了解有关沿交叉轴的柔性对齐的更多信息：

    了解有关沿主轴的柔性对齐的更多信息：

    回复于

相关问题