Kotak rata Flexbox

Saya sedang mencoba membuat grid dasar yang sama dengan flexbox. Jika saya meletakkan beberapa gambar dan menerapkan bungkus fleksibel akan terlihat seperti ini:

#wrap {
  display: flex;
  flex-wrap: wrap;
  max-width: 800px;
}

.box {
  margin: 1px;
  position: relative;
  text-align: center;
  height: 100%;
}

img {
  position: relative;
  display: block;
}
<div id="wrap">
  <div class="box"><img src="https://via.placeholder.com/250x150" /></div>
  <div class="box"><img src="https://via.placeholder.com/400x150" /></div>
  <div class="box"><img src="https://via.placeholder.com/500x150" /></div>
  <div class="box"><img src="https://via.placeholder.com/150x150" /></div>


</div>

Ini berfungsi dengan baik, tetapi segera setelah lebar yang tersedia menjadi lebih kecil, gambar akan dimasukkan ke baris baru (tentu saja karena bungkusnya). Saya bertanya-tanya apakah ini dapat dibuat responsif sehingga tetap mempertahankan tata letak ini terlepas dari lebar yang tersedia? Tapi itu harus dinamis tanpa menerapkan kelas individual ke gambar dengan css khusus.

Atau ini tidak bisa dilakukan tanpa javascript?


html css flexbox grid
person Toniq    schedule 26.01.2020    source sumber
comment
Apakah maksud Anda Anda ingin penampung tidak membungkus gambar ke dalam baris baru, tetapi terus memperkecil ukuran gambar sambil menjaga semuanya dalam satu baris?   -  person fishcakesAndCoffee    schedule 26.01.2020
comment
Ya, sesuatu seperti galeri yang dibenarkan berfungsi, tetapi saya khawatir saya memerlukan javascript untuk itu. Atau setidaknya tinggi baris yang ditentukan.   -  person Toniq    schedule 26.01.2020

Jawaban (1)


arrow_upward
0
arrow_downward

Inilah dasar pemahaman saya. https://jsfiddle.net/m4j1e3tb/

Hal-hal yang saya ubah:

  • setiap baris akan menjadi wadah fleksibelnya sendiri

  • wadah fleksibel tidak akan terbungkus

  • Pada "kotak" yang merupakan item fleksibel, saya menambahkan flex-shrink: 1, yang memberitahukan kotak tersebut mengecil ketika ruang "habis"

.box {
  margin: 1px;
  position: relative;
  text-align: center;
  max-width: 100%;
  flex-shrink: 1;
}

Sunting: pemformatan. Maaf saya masih baru mengenal stackoverflow..

person fishcakesAndCoffee    schedule 26.01.2020