flexbox에서 div 채우기를 * 수평 * 공간으로 유지하십시오.

204

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>

스 니펫 확장

html css flexbox

— 아담 벤슨
소스

324

사용 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와 어떻게 작동합니까?

— 마이클 벤자민
소스

1

나는 같은 상황에 있었고 사용 flex-grow: 1하는 것과 같은 효과가 없었습니다 flex: 1. 왜 다른지 아십니까? (나는 후자 thx 문제를 해결했다)

— WhGandalf

4

으로 flex-grow: 1의 flex-basis속성은 유지 auto기본값. 으로 flex: 1의 flex-basis속성에 변경 0. 심층 검토를 위해 여기에 내 대답을보십시오 : stackoverflow.com/q/43520932/3597276 @WhGandalf

— Michael Benjamin

flex-shrink는 나를위한 열쇠였습니다 :)

— pixelearth

25

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

여기 내가하려는 일의 그림과 그것을 해결하는 방법에 대한 샘플 코드가 있습니다.

편집 : 브라우저가 표시하는 방법에 따라 점선으로 된 아래쪽 테두리가 이상하게 보일 수 있습니다. 개인적으로 검은 색 동그라미 SVG를 반복 된 배경 이미지로 사용하고 중간 크기의 컨테이너 하단에 적절한 크기로 배치하는 것이 좋습니다. 시간이되면이 대안 솔루션을 추가 할 것입니다.

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

스 니펫 확장

— 브렛 84c
소스