it-roy-ru.com

Заставьте 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

92
Don P

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

Нет необходимости в display: inline-flex.


Начальная настройка гибкого контейнера - align-items: stretch. Это означает, что гибкие элементы будут расширяться, чтобы охватить всю длину контейнера вдоль поперечной оси.

Свойство align-self делает то же самое, что и align-items, за исключением того, что align-self применяется к элементам flex , в то время как align-items применяется к flex контейнер .

По умолчанию align-self наследует значение align-items.

Так как ваш контейнер - flex-direction: column, поперечная ось является горизонтальной, и align-items: stretch расширяет ширину дочернего элемента настолько, насколько это возможно.

Вы можете переопределить значение по умолчанию с помощью align-items: flex-start для контейнера (который наследуется всеми элементами flex) или align-self: flex-start для элемента (который ограничен одним элементом).


Подробнее о выравнивании по изгибу вдоль поперечной оси можно узнать здесь:

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

172
Michael_B