flex 元素将一行保持为自动宽度（随内容缩小）是可能的吗？ [复制]答案

【问题标题】：flex element keeping a row as auto width ( shrink with content ) is possible? [duplicate]flex 元素将一行保持为自动宽度（随内容缩小）是可能的吗？ [复制]
【发布时间】：2021-02-23 04:28:10
【问题描述】：

.container{
  border:1px solid red;
  display:inline-flex;
  flex-wrap: wrap;
  flex-direction: column;
  min-width: 300px;
}

.first{
  flex-basis: 100%;
  background-color: green;
  color:white;
}

.second{
  background-color: gray;
  color: yellow;
  flex-basis: auto;
}

 <div class="container">
  <div class="first">full width</div>
  <div class="second">
  inline-block
  </div>

我不想让“第二个”div 占用 100%。我想保持它像“inline-block”一样宽度应该扩展到内容可用。可以用flex做吗？

提前致谢

【问题讨论】：

宽度：适合内容；为.秒

标签： html css flexbox

【解决方案1】：

使用align-self 限制flexbox 中的flex-items。

.container{
  border:1px solid red;
  display:inline-flex;
  flex-wrap: wrap;
  flex-direction: column;
  min-width: 300px;
}

.first{
  flex-basis: 100%;
  background-color: green;
  color:white;
}

.second{
  background-color: gray;
  color: yellow;
  align-self: start;
}

<div class="container">
  <div class="first">full width</div>
  <div class="second">
    inline-block
  </div>
</div>

【讨论】：

如果你也想缩小边框，在这种情况下从父级移除边框并添加.container * { border:1px solid red; }

【解决方案2】：

将margin-right: auto 添加到.second 类。

.container{
  border:1px solid red;
  display:inline-flex;
  flex-wrap: wrap;
  flex-direction: column;
  min-width: 300px;
}

.first{
  flex-basis: 100%;
  background-color: green;
  color:white;
}

.second{
  background-color: gray;
  color: yellow;
  flex-basis: auto;
  margin-right: auto;
}

<div class="container">
  <div class="first">full width</div>
  <div class="second">
  inline-block
  </div>

【讨论】：