플렉스 항목이 늘어나지 않도록 방지

플렉스 항목이 늘어나지 않도록 방지

샘플:

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여기:
Flex-Start와 기준의 차이점은 무엇입니까?

세바스찬 브로슈는 이미 훌륭한 대답을 했습니다.대안적인 접근 방식은 다음과 같습니다.
margin-bottom: auto

div {
  display: flex;
  height: 200px;
  background: tan;
}

span {
  background: red;
  margin-bottom: auto;
}

<div>
  <span>This is some text.</span>
</div>

언급URL : https://stackoverflow.com/questions/33887051/prevent-flex-items-from-stretching