플렉스 항목이 부모 컨테이너의 너비가 아닌 콘텐츠 너비를 갖도록합니다.

플렉스 항목이 부모 컨테이너의 너비가 아닌 콘텐츠 너비를 갖도록합니다.

---

나는 용기가 <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컨테이너 (모든 플렉스 항목에서 상 속됨) 또는 align-self: flex-start항목 (단일 항목으로 제한됨 ) 에서 기본값을 재정의 할 수 있습니다 .

---

교차 축을 따라 플렉스 정렬에 대해 자세히 알아보십시오 .

• 플렉스 랩은 align-self, align-items 및 align-content와 어떻게 작동합니까?

주축을 따라 플렉스 정렬에 대해 자세히 알아보십시오 .

• CSS Flexbox에서 "justify-items"및 "justify-self"속성이없는 이유는 무엇입니까?

참고 URL : https://stackoverflow.com/questions/40141163/make-flex-items-take-content-width-not-width-of-parent-container