Заставьте flex-элементы принимать ширину содержимого, а не ширину родительского контейнера.

У меня есть контейнер <div>с display: flex. У него есть ребенок <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

Используйте align-items: flex-startна контейнере или align-self: flex-startна гибких предметах.

Нет необходимости для display: inline-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для контейнера (который наследуется всеми элементами flex) или align-self: flex-startдля элемента (который ограничен одним элементом).

Узнайте больше о гибком выравнивании вдоль поперечной оси здесь:

• Как flex-wrap работает с align-self, align-items и align-content?

Узнайте больше о гибком выравнивании вдоль главной оси здесь:

• В CSS Flexbox, почему нет свойств "justify-items" и "justify-self"?

В дополнение к этому 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>