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

Html / 글쓴이

<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속성은 flex 컨테이너에 적용되는 동안 flex 항목에 적용 align-items된다는 점을 제외하고 는 동일한 기능 을 수행합니다 .align-selfalign-items

기본적으로 align-self의 값을 상속합니다 align-items.

컨테이너가이므로 flex-direction: column가로축은 가로이며 align-items: stretch자식 요소의 너비를 최대한 확장합니다.

align-items: flex-start컨테이너 (모든 플렉스 항목에 상 속됨) 또는 align-self: flex-start항목 (단일 항목에 제한됨 ) 에서 기본값을 재정의 할 수 있습니다 .

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

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

답변

또한 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>

스 니펫 확장

답변