유연한 항목에 상위 컨테이너의 너비가 아닌 내용 너비를 사용하도록 설정

유연한 항목에 상위 컨테이너의 너비가 아닌 내용 너비를 사용하도록 설정

나는 컨테이너를 가지고 있습니다.<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는 자식 요소의 너비를 최대한 확장하는 것입니다. (Thecolumn설정은 또한 이유입니다.display: inline-flex작동하지 않습니다.)

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

---

가로축을 따라 유연하게 정렬하는 방법에 대한 자세한 내용은 여기를 참조하십시오.

• 플렉스 랩은 자체 정렬, 항목 정렬 및 콘텐츠 정렬과 어떻게 작동합니까?

주축에 따른 플렉스 정렬에 대한 자세한 내용은 여기를 참조하십시오.

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

에 더하여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>

width: min-content또한 동일한 결과를 산출합니다.IE11에서 지원되지 않는 경우: https://caniuse.com/mdn-css_properties_width_min-content

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