ตารางที่สมเหตุสมผลของ Flexbox

ฉันกำลังพยายามสร้างตารางชิดขอบพื้นฐานแบบเดียวกันกับเฟล็กบ็อกซ์ ถ้าฉันวางภาพบางส่วนแล้วใช้ flex wrap มันจะมีลักษณะดังนี้:

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

วิธีนี้ใช้ได้ผลดี แต่ทันทีที่ความกว้างที่มีอยู่ทำให้รูปภาพเล็กลงจะเข้าสู่บรรทัดใหม่ (เพราะเห็นได้ชัดว่ามีการตัดคำ) ฉันสงสัยว่าสิ่งนี้สามารถตอบสนองได้ดังนั้นจึงคงเค้าโครงนี้ไว้โดยไม่คำนึงถึงความกว้างที่มีอยู่หรือไม่ แต่มันจะต้องเป็นไดนามิกโดยไม่ต้องใช้แต่ละคลาสกับรูปภาพด้วย css ที่กำหนดเอง

หรือไม่สามารถทำได้หากไม่มีจาวาสคริปต์?


html css flexbox grid
person Toniq    schedule 26.01.2020    source แหล่งที่มา
comment
คุณหมายความว่าคุณต้องการให้คอนเทนเนอร์ไม่ตัดรูปภาพเป็นบรรทัดใหม่ แต่ยังคงย่อขนาดรูปภาพโดยเก็บทุกอย่างไว้ในบรรทัดเดียวใช่หรือไม่   -  person fishcakesAndCoffee    schedule 26.01.2020
comment
ใช่ บางอย่างเช่นแกลเลอรีที่สมเหตุสมผลใช้งานได้ แต่ฉันเกรงว่าจะต้องใช้จาวาสคริปต์เพื่อสิ่งนั้น หรืออย่างน้อยก็กำหนดความสูงของแถว   -  person Toniq    schedule 26.01.2020

คำตอบ (1)


arrow_upward
0
arrow_downward

นี่เป็นฐานซอสำหรับความเข้าใจของฉัน https://jsfiddle.net/m4j1e3tb/

สิ่งที่ฉันเปลี่ยนแปลง:

  • แต่ละแถวจะเป็นคอนเทนเนอร์ดิ้นของตัวเอง

  • ภาชนะดิ้นจะไม่ห่อ

  • บน "กล่อง" ซึ่งเป็นรายการดิ้น ฉันได้เพิ่ม flex-shrink: 1 ซึ่งบอกให้กล่องย่อขนาดเมื่อช่องว่าง "หมด"

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

แก้ไข: การจัดรูปแบบ ขออภัยฉันยังใหม่กับ stackoverflow ..

person fishcakesAndCoffee    schedule 26.01.2020