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

Posted 2023-03-05

【中文标题】flex 元素将一行保持为自动宽度（随内容缩小）是可能的吗？ [复制]

【英文标题】：flex element keeping a row as auto width ( shrink with content ) is possible? [duplicate]

【发布时间】：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做吗？

提前致谢

【问题讨论】：

宽度：适合内容；为.秒

【参考方案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>