아이들이 가로축을 채우도록 신장시키는 방법은?

아이들이 가로축을 채우도록 신장시키는 방법은?

좌우 플렉스박스가 있습니다.

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

.wrapper>.left {
  background: #fcc;
 }

.wrapper>.right {
  background: #ccf;
}

<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>.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:1;어린이용

.wrapper {
    display: flex;
    flex-direction: row;
    .
    .
    .
}
.wrapper > * {
    flex: 1;
}

평소에는 사용할 수 없다는 것을 기억하세요.width: ... 그리고.flex:1;한 아이를 위해 함께 있는

컨테이너(래퍼)에 자녀가 두 명밖에 없기 때문에 여유를 가지고 노는 대신 디스플레이(flex; 및 정당화 콘텐츠: 공백 사이)를 추가하기만 하면 됩니다.

높이와 관련하여 부모(위퍼)에게 원하는 높이(예: 100px)를 설정한 다음 두 자녀(좌우)의 높이를 모두 100%로 설정할 수 있습니다.

.wrapper {
  display: flex;
  justify-content: space-between;
  height:100px;
}

.wrapper>.left {
  background: #fcc;
  height:100%;
}

.wrapper>.right {
  background: #ccf;
  height:100%;
  flex: 1;
}

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

언급URL : https://stackoverflow.com/questions/29467660/how-to-stretch-children-to-fill-cross-axis