Chromium ทำให้เกิดช่องว่างของ Flexbox

พร็อพเพอร์ตี้ CSS gap พร้อมใช้งานสำหรับเครื่องมือ CSS Flexbox และ CSS แบบหลายคอลัมน์ของ Chromium

อัครเดช ชัยดี
เดวิด โกรแกน
David Grogan
GitHub

ช่องว่างของ CSS

gap จะเป็นแบบสัมพัทธ์ ซึ่งหมายความว่าจะเปลี่ยนแปลงแบบไดนามิกตามทิศทางการไหลของเนื้อหา ตัวอย่างเช่น gap จะปรับโดยอัตโนมัติตามค่า writing-mode หรือ direction ต่างๆ ที่คุณตั้งไว้สำหรับผู้ใช้ระหว่างประเทศ ซึ่งช่วยแบ่งเบาภาระของความท้าทายในการเว้นระยะสำหรับ คอมโพเนนต์และผู้เขียน CSS สำหรับคอมโพเนนต์และ CSS ได้อย่างมาก ลดการปรับขนาดโค้ดได้มากขึ้น

ช่องว่างของการสาธิตการรองรับการแปล เนื่องจากต้องจัดการกับการเปลี่ยนแปลงทิศทางและโหมดการเขียน: Codepen | ทวีต

ความเข้ากันได้กับเบราว์เซอร์

การสนับสนุนเบราว์เซอร์

  • 57
  • 16
  • 52
  • 10.1

แหล่งที่มา

การใช้งาน

gap ยอมรับความยาวหรือเปอร์เซ็นต์ของ CSS เป็นค่า

.gap-example {
  display: grid;
  gap: 10px;
  gap: 2ch;
  gap: 5%;
  gap: 1em;
  gap: 3vmax;
}


ช่องว่างสามารถส่งได้ 1 ความยาว ซึ่งจะใช้กับทั้งแถวและคอลัมน์

ชวเลข
.grid {
  display: grid;
  gap: 10px;
}
ตั้งค่าทั้งแถวและคอลัมน์พร้อมกันพร้อมกัน
ขยายอยู่
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
}


ช่องว่างสามารถส่งได้ 2 ความยาว ซึ่งจะใช้กับแถวและคอลัมน์

ชวเลข
.grid {
  display: grid;
  gap: 10px 5%;
}
ตั้งค่าทั้งแถวและคอลัมน์แยกกันพร้อมกัน
ขยายอยู่
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 5%;
}

Flexbox gap

ก่อนที่ gap จะอยู่ใน Flexbox กลยุทธ์ต่างๆ จะเกี่ยวข้องกับส่วนต่างกำไร ตัวเลือกที่ซับซ้อน :last หรือตัวเลือกคลาส Pseudo ประเภท :first หรือวิธีการอื่นๆ ในการจัดการพื้นที่ของชุดย่อยและการรวมที่มีเลย์เอาต์แบบไดนามิก

ความพยายามที่ผ่านมา

ต่อไปนี้เป็นรูปแบบที่พวกมันนำมาใช้หาระยะห่างที่เหมือนกับช่องว่าง

ตัวเลือกคลาส Pseudo
.layout > :not(:last-child) {
  margin-bottom: 10px;
  margin-right: 10px;
}
นกเค้าแมว
.layout > * + * {
  margin-bottom: 10px;
  margin-right: 10px;
}
แหล่งที่มา

แต่วิธีการข้างต้นไม่ได้มาแทนที่ gap โดยสมบูรณ์ และมักต้องมีการปรับ @media หรือ :lang() เพื่อให้สอดคล้องกับสถานการณ์การรวม โหมดการเขียน หรือทิศทาง การเพิ่มคำค้นหาสื่อ 1-2 รายการไม่ดูแย่นัก แต่การเพิ่มก็อาจทำให้มีตรรกะของเลย์เอาต์ที่ซับซ้อนได้

จุดประสงค์ที่แท้จริงที่ผู้เขียนด้านบนคือไม่ให้รายการย่อยสามารถสัมผัสได้

The Antidote: Gap

.layout {
  display: flex;
  gap: 10px;
}

ใน 2 ตัวอย่างแรก (ไม่มี Flexbox gap) เด็กจะได้รับการกำหนดเป้าหมายและกำหนดระยะห่างจากองค์ประกอบอื่นๆ ในตัวอย่างการแก้จุดบกพร่อง คอนเทนเนอร์ จะเป็นเจ้าของการเว้นวรรค เด็กแต่ละคนสามารถแบ่งเบาภาระของระบบไปพร้อมๆ กับการรวมสิทธิ์ในการเป็นเจ้าของพื้นที่ ลดความสม่ำเสมอ จัดลำดับใหม่ เปลี่ยนวิวพอร์ต นำองค์ประกอบออก เพิ่มองค์ประกอบใหม่ต่อท้าย ฯลฯ โดยระยะห่างยังคงสอดคล้องกัน ไม่มีตัวเลือกใหม่ ไม่มีคำค้นหาสื่อใหม่ มีแค่ช่องว่าง

ข้อมูลอัปเดตเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บใน Chromium

เมื่อการอัปเดตเหล่านี้มีการเปลี่ยนแปลงในเครื่องมือสำหรับนักพัฒนาเว็บใน Chromium ให้สังเกตวิธีที่แผงรูปแบบจัดการกับ grid-gap และ gap ตอนนี้เลย 👍

สำนักงานที่มีคน 2 คนกำลังทำงานที่โต๊ะ
เครื่องมือสำหรับนักพัฒนาเว็บแสดงทั้ง grid-gap และ gap โดยที่ gap แสดงอยู่ด้านล่าง grid-gap เพื่ออนุญาตให้การเรียงซ้อนใช้ไวยากรณ์ล่าสุด

เครื่องมือสำหรับนักพัฒนาเว็บรองรับทั้ง grid-gap และ gap เนื่องจาก gap เป็นชื่อแทนของไวยากรณ์ก่อนหน้า

ศักยภาพใหม่ของเลย์เอาต์

Flexbox gap ทำให้เราปลดล็อกได้มากกว่าความสะดวก เราปลดล็อกเลย์เอาต์ที่แท้จริง ที่มีประสิทธิภาพ มีระยะห่างที่เหมาะสม ในวิดีโอและตัวอย่างโค้ดต่อไปนี้ด้านล่าง ตารางกริด ไม่สามารถสร้างเลย์เอาต์ที่ Flexbox ทำได้ ตารางกริดต้องมีแถวและคอลัมน์เท่าๆ กัน แม้ว่าจะมีการกำหนดไว้โดยแท้

ทวีต

นอกจากนี้ ให้สังเกตด้วยว่าระยะห่างระหว่างเด็กมีความไดนามิกเพียงใดเมื่อเด็กตัดคำนี้ออกมา คำค้นหาสื่อตรวจไม่พบการตัดข้อความแบบนั้นเพื่อทำการปรับแบบอัจฉริยะ Flexbox gap สามารถและจะดำเนินการให้คุณสำหรับการทำให้เป็นสากลทั้งหมด

หลายคอลัมน์ gap

นอกจาก Flexbox ที่รองรับไวยากรณ์ gap แล้ว เลย์เอาต์หลายคอลัมน์ยังรองรับไวยากรณ์ gap ที่สั้นลงด้วย

article {
  column-width: 40ch;
  column-gap: 5ch;
  gap: 5ch;
}

แจ๋วจริง