Bagaimana cara meregangkan anak untuk mengisi sumbu silang?

141

Saya memiliki flexbox kiri-kanan:

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

Luaskan cuplikan

Masalahnya adalah bahwa anak yang tepat tidak berperilaku responsif. Untuk lebih spesifik, saya ingin mengisi ketinggian bungkusnya.

Bagaimana cara mencapai ini?

css flexbox Deborah Cole
sumber

itu mengisi ketinggian pembungkus! Saya mengujinya di Chrome dan Firefox dan tidak ada masalah. mungkin Anda terlalu menyederhanakan kode Anda. Anda dapat menguji ini dengan mengatur background-coloruntuk anak-anak atau pengaturan align-items: centerdalam pembungkus.

samad montazeri

ya, ketinggian bungkus tidak diisi dengan safari untuk beberapa alasan ... chrome dan firefox melakukan ini dengan baik dengan menetapkan tinggi: '100%' pada anak-anak

Pencilcheck

Jawaban:

175

Anak-anak dari wadah baris-kotak fleksibel secara otomatis mengisi ruang vertikal wadah.
Tentukan flex: 1;untuk anak jika Anda ingin mengisi ruang horisontal yang tersisa:

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

Luaskan cuplikan

Tetapkan flex: 1;untuk kedua anak jika Anda ingin mereka mengisi ruang horizontal dalam jumlah yang sama:

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

Luaskan cuplikan

Alex Shesterov
sumber

flexadalah properti singkatan untuk flex-grow, flex-shrink, dan flex-basis. flex: 1;setara dengan flex-grow: 1;.

Rory O'Kane

Sepertinya align-items: stretch;tidak diperlukan

Matt