[html] 플렉스 아이템이 늘어나지 않도록 방지

Program / 글쓴이

견본: 

div {
  display: flex;
  height: 200px;
  background: tan;
}
span {
  background: red;
}
<div>
  <span>This is some text.</span>
</div>

스 니펫 확장

두 가지 질문이 있습니다.

  1. 기본적으로 왜 발생 span합니까?
  2. 플렉스 컨테이너의 다른 플렉스 아이템에 영향을주지 않고 늘어나는 것을 방지하는 올바른 접근 방식은 무엇입니까?

답변

스팬 높이를 늘리고 싶지 않습니까?
컨테이너의 전체 높이를 늘리지 않도록 하나 이상의 플렉스 아이템에 영향을 줄 수 있습니다.

컨테이너의 모든 플렉스 아이템에 영향을 미치려면 다음을 선택하십시오.
로 설정align-items: flex-start;해야div하며이 컨테이너의 모든 플렉스 아이템은 콘텐츠의 높이를 가져옵니다.

div {
  align-items: flex-start;
  background: tan;
  display: flex;
  height: 200px;
}
span {
  background: red;
}
<div>
  <span>This is some text.</span>
</div>

스 니펫 확장

단일 플렉스 아이템에만 영향을 미치려면 다음을 선택하십시오.
컨테이너에서 단일 플렉스 아이템을 확장 해제align-self: flex-start;하려면이 플렉스 아이템으로 설정해야합니다. 컨테이너의 다른 모든 플렉스 아이템은 영향을받지 않습니다.

div {
  display: flex;
  height: 200px;
  background: tan;
}
span.only {
  background: red;
  align-self:flex-start;
}
span {
    background:green;
}
<div>
  <span class="only">This is some text.</span>
  <span>This is more text.</span>
</div>

스 니펫 확장

왜 이런 일이 발생 span합니까?
속성의 기본값 align-items은 stretch입니다. 이것은 왜 이유 span의 높이를 채울 div.

차이 baseline와 flex-start?
글꼴 크기가 다른 플렉스 항목에 텍스트가있는 경우 첫 번째 줄의 기준선을 사용하여 플렉스 항목을 세로로 배치 할 수 있습니다. 글꼴 크기가 더 작은 플렉스 항목은 컨테이너와 상단 자체 사이에 약간의 공간이 있습니다. 로 flex-start플렉스 항목 (공백없이) 컨테이너의 상단으로 설정됩니다.

div {
  align-items: baseline;
  background: tan;
  display: flex;
  height: 200px;
}
span {
  background: red;
}
span.fontsize {
  font-size:2em;
}
<div>
  <span class="fontsize">This is some text.</span>
  <span>This is more text.</span>
</div>

스 니펫 확장

당신은의 차이에 대한 자세한 정보를 찾을 수 있습니다 baseline그리고 flex-start여기
플렉스 스타트 및 기준의 차이는 무엇입니까?

답변