플렉스 용기에 나머지 높이 또는 너비 채우기

플렉스 용기에 나머지 높이 또는 너비 채우기

플렉스 박스에 2개의 디브가 나란히 있습니다.오른손은 항상 같은 폭이어야 하고, 왼손은 남은 공간만 잡았으면 합니다.하지만 제가 특별히 너비를 설정하지 않는 한 그렇지 않을 것입니다.

그래서 현재 화면을 정말로 뭉개버릴 때까지 96%로 설정되어 있습니다. 그러면 오른쪽 점이 필요한 공간을 조금 부족하게 됩니다.

저는 그것을 그대로 둘 수 있다고 생각하지만, 그것은 잘못된 느낌입니다. 마치 다음과 같은 말을 할 수 있는 방법이 있을 것 같습니다.

오른쪽 것은 항상 같습니다; 왼쪽에 있는 당신은 남은 모든 것을 얻습니다.

.ar-course-nav {
  cursor: pointer;
  padding: 8px 12px 8px 12px;
  border-radius: 8px;
}
.ar-course-nav:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

<br/>
<br/>
<div class="ar-course-nav" style="display:flex; justify-content:space-between;">
  <div style="width:96%;">
    <div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">
      <strong title="Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!">
                Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!
            </strong>
    </div>
    <div style="width:100%; display:flex; justify-content:space-between;">
      <div style="color:#555555; margin-right:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;" title="A really really really really really really really really really really really long department name">
        A really really really really really really really really really really really long department name
      </div>
      <div style="color:#555555; text-align:right; white-space:nowrap;">
        Created: 21 September 2016
      </div>
    </div>
  </div>
  <div style="margin-left:8px;">
    <strong>&gt;</strong>
  </div>
</div>

사용flex-grow플렉스 항목이 주 축에서 사용 가능한 공간을 사용하도록 만드는 속성입니다.

이 속성은 화면 크기 조정 또는 다른 항목 추가/제거와 같은 동적 환경에 맞게 길이를 조정하여 항목을 최대한 확장합니다.

일반적인 예는 다음과 같습니다.flex-grow: 1또는 속기 속성을 사용하여flex: 1.

그러므로, 대신에width: 96%당신의 div에서, 사용합니다.flex: 1.

---

작성한 내용:

그래서 현재 화면을 정말로 뭉개버릴 때까지 96%로 설정되어 있습니다. 그러면 오른쪽 점이 필요한 공간을 조금 부족하게 됩니다.

고정 너비 div의 스퀴싱은 다른 플렉스 속성과 관련이 있습니다.flex-shrink

기본적으로 Flex 항목은 다음과 같이 설정됩니다.flex-shrink: 1용기의 오버플로를 방지하기 위해 용기를 축소할 수 있습니다.

이 기능을 사용하지 않으려면 사용flex-shrink: 0.

자세한 내용은 다음 답변의 요인 섹션을 참조하십시오.

• 플렉스 베이스와 폭의 차이점은 무엇입니까?

---

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

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

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

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

기본적으로 저는 제 코드를 '행'의 중간 섹션으로 만들어 양쪽의 콘텐츠(내 경우 점선 구분 기호)에 맞게 자동 조정하려고 했습니다.@Michael_B가 제안한 것처럼, 열쇠는 다음과 같습니다.display:flex행 컨테이너에 그리고 적어도 행에 있는 당신의 중간 컨테이너가 있는지 확인합니다.flex-grow외부 컨테이너보다 최소 1 이상 높은 값(외부 컨테이너가 없는 경우)flex-grow되었습니다. 됩니다. 중간 컨테이너는 다음에 대해 1만 필요합니다.flex-grow).

다음은 제가 하려고 했던 작업의 사진과 해결 방법에 대한 샘플 코드입니다.

.row {
  background: lightgray;
  height: 30px;
  width: 100%;
  display: flex;
  align-items:flex-end;
  margin-top:5px;
}
.left {
  background:lightblue;
}
.separator{
  flex-grow:1;
  border-bottom:dotted 2px black;
}
.right {
  background:coral;
}

<div class="row">
  <div class="left">Left</div>
  <div class="separator"></div>
  <div class="right">Right With Text</div>
</div>
<div class="row">
  <div class="left">Left With More Text</div>
  <div class="separator"></div>
  <div class="right">Right</div>
</div>
<div class="row">
  <div class="left">Left With Text</div>
  <div class="separator"></div>
  <div class="right">Right With More Text</div>
</div>

플렉스 용기의 요소에는 다음 두 줄을 사용합니다.

flex-grow: 1; // Fill remaining space
min-width: 0; // Don't use more space than available

최소 높이 및 최소 너비를 사용합니다.최소 높이 및 최소 너비 속성은 유연한 항목의 최소 높이 및 너비를 지정합니다.Flex 항목의 flex-grow 속성을 1로 설정하면 항목이 나머지 공간을 채우도록 확장되지만 최소 크기 아래로 축소되지는 않습니다.

언급URL : https://stackoverflow.com/questions/37745051/fill-the-remaining-height-or-width-in-a-flex-container