在 flex-direction: column 中设置 `width: auto`；

Question

我有 div1 和 flex-direction: column。在那个 div1 里面，我想要另一个 div2。 我将用 不同长度的单词 填充 那个 div2，我希望 width 是 auto(self -可调节的）。但是 width: auto 不适用于 flex-direction: column。我想让 div2 左对齐 .

.parent {
  background: lightblue;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.child {
  display: flex;
  border: 2px solid green;
  border-radius: 4px;
  padding: 10px;
  ///////
  width: auto;
}

<div class='parent'>
  <div class='child'>
    <span>
      Some text
    </span>
  </div>
 </div>

我想要与 flex-direction 设置为 row 相同的行为。 就像这样：

.parent {
  background: lightblue;
  padding: 10px;
  display: flex;
  flex-direction: row;
}
.child {
  display: flex;
  border: 2px solid green;
  border-radius: 4px;
  padding: 10px;
}

<div class='parent'>
  <div class='child'>
    <span>
      Some text
    </span>
  </div>
 </div>

P.S。不能使用 width: max-content; 和 width: min-content;

Answer 1

将 align-items:flex-start 放在 parent 上。

.parent {
  background: lightblue;
  padding: 10px;
  display: flex;
  flex-direction: column;
align-items: flex-start;
}
.child {
  display: flex;
  border: 2px solid green;
  border-radius: 4px;
  padding: 10px;
}

<div class='parent'>
  <div class='child'>
    <span>
      Some text
    </span>
  </div>
 </div>

或者，align-self:start 在 child

.parent {
  background: lightblue;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.child {
  display: flex;
  border: 2px solid green;
  border-radius: 4px;
  padding: 10px;
  align-self: start;
}

<div class='parent'>
  <div class='child'>
    <span>
      Some text
    </span>
  </div>
</div>

在 flex-direction: column 中设置 `width: auto`；

Set `width: auto` in flex-direction: column;

html

css

width

flexbox