[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>
답변
align-items: flex-start
용기 또는 align-self: flex-start
플렉스 품목에 사용하십시오 .
필요 없습니다 display: inline-flex
.
플렉스 컨테이너의 초기 설정은입니다 align-items: stretch
. 즉, 플렉스 아이템은 가로 축을 따라 컨테이너의 전체 길이를 덮도록 확장됩니다.
이 align-self
속성은 flex 컨테이너에 적용되는 동안 flex 항목에 적용 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
거의 동일한 작업을 수행하는 자동 여백을 고려할 수도 있습니다
.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>