축을 채우도록 아이들을 늘리는 방법?

141

왼쪽 오른쪽 flexbox가 있습니다.

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 70vh;
  min-height: 325px; 
  max-height:570px; 
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

스 니펫 확장

문제는 올바른 자녀가 반응 적으로 행동하지 않는다는 것입니다. 구체적으로 래퍼의 높이를 채우고 싶습니다.

이것을 달성하는 방법?

css flexbox

— 데보라 콜
소스

래퍼의 높이를 채 웁니다! Chrome 및 Firefox에서 테스트했으며 아무런 문제가 없었습니다. 코드를 너무 단순화했을 수도 있습니다. background-color하위를 설정하거나 align-items: center랩퍼 를 설정 하여 이를 테스트 할 수 있습니다 .

— samad montazeri

그래, 래퍼의 높이는 어떤 이유로 사파리에 채워지지 않습니다 ... 크롬과 파이어 폭스는 높이를 설정 하여이 작업을 훌륭하게 수행합니다. 어린이의 경우 '100 %'

— Pencilcheck

175

row-flexbox 컨테이너의 자식은 컨테이너의 수직 공간을 자동으로 채 웁니다.
flex: 1;나머지 수평 공간을 채우려면 하위를 지정하십시오 .

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > .left
{
  background: #fcc;
}
.wrapper > .right
{
  background: #ccf;
  flex: 1; 
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

스 니펫 확장

flex: 1;동일한 양의 가로 공간을 채우려면 두 하위 항목을 모두 지정 하십시오.

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > div 
{
  flex: 1; 
}
.wrapper > .left
{
  background: #fcc;
}
.wrapper > .right
{
  background: #ccf;
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

스 니펫 확장

— 알렉스 셰 스테 로프
소스

flex에 대한 약식 속성이다 flex-grow, flex-shrink하고 flex-basis. flex: 1;와 같습니다 flex-grow: 1;.

— Rory O'Kane 1

align-items: stretch;필요하지 않은 것 같습니다

— Matt