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

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

Adam Argyle
David Grogan
David Grogan
GitHub

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

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

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

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

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

การใช้งาน

gap ยอมรับ length หรือ percentage ของ 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;
}


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

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

Flexbox gap

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

ความพยายามก่อนหน้า

รูปแบบต่อไปนี้เป็นรูปแบบที่ผู้ใช้ใช้เพื่อให้ได้ช่องว่างคล้ายช่องว่าง

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

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

สิ่งที่ผู้เขียนด้านบนต้องการจริงๆ คือไม่ให้รายการย่อยใดๆ สัมผัสกัน

The Antidote: gap

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

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

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

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

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

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

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

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

ทวีต

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

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

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

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

เจ๋งไปเลย