Сделать гибкие элементы принимают ширину содержимого, а не ширину родительского контейнера

у меня есть контейнер <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

550   1  

1 ответ:

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

не нужно display: inline-flex.

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

The align-self свойство делает то же самое как align-items, только align-self относится к гибкий график работы пунктов пока align-items относится к flex контейнер.

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

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

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

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

узнать больше о выравнивании гибкого трубопровода вдоль главная ось здесь:

111  
2017-11-30 13:10:22

Comments

    Ничего не найдено.
Click here to cancel reply.