FlexBox에서 div 채우기를 * 수평 * 공간으로 유지

FlexBox에서 div 채우기를 * 수평 * 공간으로 유지

---

flexbox에 2 개의 div가 나란히 있습니다. 오른손은 항상 같은 너비 여야하며, 왼손은 남은 공간을 잡기를 원합니다. 그러나 너비를 구체적으로 설정하지 않으면 그렇지 않습니다.

따라서 현재 96 %로 설정되어 화면을 실제로 스쿼시 할 때까지 좋아 보입니다. 오른쪽 div는 필요한 공간에 약간 굶주립니다.

나는 그것을 그대로 둘 수 있다고 생각하지만 잘못 느낄 수 있습니다-말할 방법이 있어야합니다.

올바른 것은 항상 같습니다. 당신은 왼쪽에-당신은 남아있는 모든 것을 얻을

.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는 필요한 공간에 약간 굶주립니다.

고정 너비 div의 스쿼시는 다른 flex 속성과 관련이 있습니다. flex-shrink

기본적으로 flex-shrink: 1컨테이너의 오버플로를 방지하기 위해 축소 할 수있는 플렉스 항목이 설정 되어 있습니다.

이 기능을 비활성화하려면을 사용하십시오 flex-shrink: 0.

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

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

---

주축을 따라 플렉스 정렬에 대해 자세히 알아보십시오 .

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

교차 축을 따라 플렉스 정렬에 대해 자세히 알아보십시오 .

• Flex-Wrap은 align-self, align-items 및 align-content와 어떻게 작동합니까?

---

기본적으로 코드의 양쪽에 내용을 자동 조정하기 위해 '행'의 중간 섹션을 갖도록 노력했습니다 (내 경우에는 점선 구분 기호). @Michael_B가 제안한 것처럼 키는 display:flex행 컨테이너에서 사용 중이며 행의 중간 컨테이너 flex-grow값이 1 이상 인지 확인합니다 (외부 컨테이너에 flex-grow속성이 적용 되지 않은 경우 ).

Here's a pic of what I was trying to do and sample code for how I solved it.

Edit: Dotted bottom border will probably look weird depending on how your browser displays it. I'd personally recommend using a black circle SVG as a repeated background image, properly sized and positioned to the bottom of the middle container. Will add this alternative solution when I get time.

.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>

참고URL : https://stackoverflow.com/questions/37745051/make-div-fill-remaining-horizontal-space-in-flexbox