777

ในการตั้งค่าระยะห่างน้อยที่สุดระหว่างรายการ flexbox ที่ฉันใช้margin: 0 5pxกับ.itemและmargin: 0 -5pxบนภาชนะ สำหรับฉันดูเหมือนว่าแฮ็ค แต่ฉันไม่สามารถหาวิธีที่ดีกว่านี้

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  margin: 0 5px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

ขยายตัวอย่างข้อมูล

css flexbox

— Sasha Koss
แหล่งที่มา

28

ไม่ใช่แฮ็ค - เป็นหนึ่งในวิธีที่กำหนดไว้สำหรับจัดเรียงรายการ มีคุณสมบัติอื่น ๆ ว่า ดูw3.org/TR/css3-flexbox/#alignment

— BoltClock

4

ใช่ฉันเข้าใจ แต่ตัวอย่างเช่นมีคุณสมบัติคอลัมน์ช่องว่างสิ่งที่ช่วยให้เราสามารถควบคุมระยะห่างจากคอนเทนเนอร์: w3.org/TR/css3-multicol/#column-gap #

— Sasha Koss

สาเหตุที่เป็นมาร์จิ้นยุบของเฟล็กบ็อกซ์คำถามอื่น ๆ มี awser ที่เหมาะสมของ [ฉันจะหยุดการย่อส่วนสุดท้ายในเฟล็กบ็อกซ์ได้อย่างไร ] ( stackoverflow.com/questions/38993170/… )

— Jack Yang

6

CSS กล่องจัดโมดูลระดับที่ 3มีส่วนในช่องว่างระหว่างกล่อง - ซึ่งนำไปใช้กับองค์ประกอบหลายคอลัมน์ภาชนะดิ้นและภาชนะตาราง ดังนั้นในที่สุดสิ่งนี้จะง่ายเหมือน: row-gap: 5px- เสร็จสิ้น

— Danield

2

@JohnCarrell firefox ได้รองรับgapคุณสมบัติบน flex container ( caniuse ) แล้ว

— Danield

427

Flexbox ไม่มีการยุบขอบ
Flexbox ไม่มีสิ่งใดที่คล้ายกับborder-spacingตาราง (ยกเว้นคุณสมบัติ CSS gapซึ่งไม่รองรับเบราว์เซอร์ส่วนใหญ่ในแคนาดา )

ดังนั้นการบรรลุสิ่งที่คุณขอเป็นเรื่องยากขึ้นเล็กน้อย

จากประสบการณ์ของฉันวิธีที่ "สะอาดที่สุด" ที่ไม่ได้ใช้:first-child/ :last-childและทำงานโดยไม่มีการดัดแปลงใด ๆflex-wrap:wrapคือการติดตั้งpadding:5pxบนภาชนะและmargin:5pxบนเด็ก ๆ ที่จะสร้าง10pxช่องว่างระหว่างเด็กแต่ละคนและระหว่างเด็กแต่ละคนและผู้ปกครองของพวกเขา

การสาธิต

.upper
{
  margin:30px;
  display:flex;
  flex-direction:row;
  width:300px;
  height:80px;
  border:1px red solid;

  padding:5px; /* this */
}

.upper > div
{
  flex:1 1 auto;
  border:1px red solid;
  text-align:center;

  margin:5px;  /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */
{flex-direction:column;flex-wrap:wrap;width:200px;height:200px;}

<div class="upper">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

<div class="upper mc">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

ขยายตัวอย่างข้อมูล

— พนักงานทุกคนมีความสำคัญ
แหล่งที่มา

219

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

— Chris Nicola

17

เกิดอะไรขึ้นถ้าorderตั้งค่าคุณสมบัติ :first-child/:last-childจะไม่ทำงานตามที่คาดไว้

— Guria

4

“ Flexbox ไม่มีการยุบขอบ” ลึกซึ้งมากและเห็นได้ชัดว่าเป็นความจริง แต่ฉันขอการอ้างอิงได้ไหม?

— chharvey

2

นี่ไม่ใช่คำตอบที่แย่ไปกว่าคำถามเดิมเหรอ? วิธีนี้ต้องการให้คุณมีพื้นที่ว่างรอบภาชนะและรางน้ำต้องเป็นเลขคู่เสมอ

— limitlessloop

7

@chharvey จากข้อมูลจำเพาะw3.org/TR/css-flexbox-1/#item-margins "ระยะขอบของไอเท็มเฟล็กที่อยู่ติดกันจะไม่ยุบ"

— romellem

195

นี่ไม่ใช่แฮ็ค เทคนิคเดียวกันนี้ยังใช้โดย bootstrap และกริดของมันแม้ว่าจะมีระยะขอบ bootstrap จะใช้การเสริมสำหรับ cols

.row {
  margin:0 -15px;
}
.col-xx-xx {
  padding:0 15px;
}

— จอร์จรูเมลลิส
แหล่งที่มา

1

ปัญหาเฉพาะกับวิธีนี้คือการรักษารายการความสูงเท่ากันด้วยสีพื้นหลัง การวางตำแหน่งที่แน่นอนด้วยการheight:100%; width:100%ละเว้นช่องว่างภายในของรายการ

— Steven Vachon

3

ปัญหาที่เกิดขึ้นคือflex-basisค่าIE10 และ 11 ไม่ได้มีค่าbox-sizing: border-boxดังนั้นเด็กที่มีช่องว่างภายในหรือขอบจะล้นผู้ปกครอง (หรือตัดในกรณีนี้) ที่มา

— คาร์สัน

18

มีปัญหาอีกวิธีในวิธีนี้คือการปรับระยะขอบแบบนี้สามารถขยายความกว้างของหน้ากระดาษได้ ตัวอย่าง: jsfiddle.net/a97tatf6/1

— นาธานออสมัน

4

แม้ว่าฉันจะเห็นด้วยว่านี่ไม่ใช่แฮ็ค แต่ความจริงที่ว่าบางสิ่งที่ใช้กันอย่างแพร่หลายไม่ได้หมายความว่าไม่ใช่แฮ็ค ดูโพลีฟิลส์แพทช์รักษาความปลอดภัยชั่วคราวการแก้ไข

— William

15

แน่นอนว่านี่คือแฮ็ค เนื่องจาก Bootstrap ใช้วิธีนี้ไม่ได้หมายความว่าไม่ใช่แฮ็ค นั่นหมายความว่า Bootstrap ใช้แฮ็ก

— Michael Benjamin

108

Flexbox และ css Calc พร้อมการรองรับหลายแถว

สวัสดีด้านล่างเป็นโซลูชันการทำงานของฉันสำหรับเบราว์เซอร์ทั้งหมดที่รองรับ flexbox ไม่มีกำไรติดลบ

ซอสาธิต

   
.flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flexbox > div {
  /*
    1/3  - 3 columns per row
    10px - spacing between columns 
  */
  box-sizing: border-box;
  margin: 10px 10px 0 0;
  outline: 1px dotted red;
  width: calc(1/3*100% - (1 - 1/3)*10px);
}

/*
  align last row columns to the left
  3n - 3 columns per row
*/
.flexbox > div:nth-child(3n) {
  margin-right: 0;
}

.flexbox::after {
  content: '';
  flex: auto;
}

/*
  remove top margin from first row
  -n+3 - 3 columns per row 
*/
.flexbox > div:nth-child(-n+3) {
  margin-top: 0;
}

<div class="flexbox">
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
</div>

ขยายตัวอย่างข้อมูล

รับทราบรหัสนี้สามารถสั้นลงได้โดยใช้ SASS

อัปเดต 2020.II.11 จัดแนวคอลัมน์ในแถวสุดท้ายทางซ้าย

อัพเดท 2020.II.14 ลบขอบล่างในแถวสุดท้าย

— Dariusz Sikorski
แหล่งที่มา

13

ฉันชอบโซลูชันนี้ แต่ล้มเหลวหากมีเพียง 2 รายการในแถวสุดท้าย justify-contentรายการที่ยังไม่ได้เรียงซ้อนกันเนื่องจากการ

— James Brantly

4

เพื่อแก้ไขปัญหาทั้งสองรายการเป็นเพียงการเปลี่ยนแปลงหรือjustify-content: space-evenly; justify-content: space-around;

— พอลรูนีย์

6

@PaulRooney บนเว็บไซต์ที่มีหลายรายการคุณอาจไม่ทราบจำนวนรายการเสมอหากมีการสร้างรายการโดย CMS

— NinjaFart

1

@ 1.21gigawatts โปรดอย่าทำการเปลี่ยนแปลงรหัส / คำตอบของผู้อื่นโดยพลการ เขียนคำตอบของคุณเองแทน

— TylerH

2

@TylerH มันไม่ได้โดยพลการ คำถามถามว่า "... เพื่อกำหนดระยะห่างระหว่างรายการ flexbox" อย่างไร คำตอบนี้ไม่แสดงขนาดของรางน้ำ การตั้งค่าสีพื้นหลังจะแสดงรางน้ำ การเพิ่มเส้นขอบแสดงให้เห็นว่ามีระยะขอบด้านล่างแถวสุดท้าย

— 1.21 gigawatts

93

คุณสามารถใช้เส้นขอบโปร่งใส

ฉันได้ไตร่ตรองปัญหานี้แล้วในขณะที่พยายามสร้างโมเดลกริดแบบยืดหยุ่นซึ่งสามารถย้อนกลับไปเป็นตาราง + โมเดลเซลล์ตารางสำหรับเบราว์เซอร์รุ่นเก่าได้ และเส้นขอบสำหรับรางน้ำคอลัมน์ดูเหมือนจะเป็นตัวเลือกที่เหมาะสมที่สุดสำหรับฉัน เช่นตารางเซลล์ไม่มีระยะขอบ

เช่น

.column{
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid transparent;
}

นอกจากนี้โปรดทราบว่าคุณต้องการmin-width: 50px;flexbox รุ่นเฟล็กซ์จะได้จัดการกับขนาดคงที่จนกว่าคุณจะทำในองค์ประกอบลูกโดยเฉพาะอย่างยิ่งที่คุณต้องการเป็นคงที่และดังนั้นจึงแยกออกจากการเป็นflex: none; http://jsfiddle.net/GLpUp/4/ แต่คอลัมน์ทั้งหมดพร้อมกับนั้นไม่ใช่โมเดลที่ยืดหยุ่นอีกต่อไป นี่คือบางสิ่งที่ใกล้เคียงกับโมเดลแบบยืดหยุ่น: http://jsfiddle.net/GLpUp/5/"flexi"flex:none;

ดังนั้นคุณสามารถใช้มาร์จิ้นได้ตามปกติถ้าคุณไม่ต้องการทางเลือกที่โต๊ะเซลล์สำหรับเบราว์เซอร์รุ่นเก่า http://jsfiddle.net/GLpUp/3/

การตั้งค่าbackground-clip: padding-box;จะมีความจำเป็นเมื่อใช้พื้นหลังมิฉะนั้นพื้นหลังจะไหลเข้าสู่พื้นที่ชายแดนโปร่งใส

— hexalys
แหล่งที่มา

5

คำตอบที่ดี ระยะขอบถูกใช้แตกต่างกันใน flexbox ของ (เช่นการดูดซับพื้นที่พิเศษ) เพื่อให้เส้นขอบโปร่งใสให้ทางออกที่ยอดเยี่ยมสำหรับองค์ประกอบระยะห่างเท่า ๆ กันที่สามารถห่อด้วยพฤติกรรมเหมือนขอบ

— Eolis

4

ยกเว้นเมื่อคุณใช้สีพื้นหลังพื้นหลังของคุณเกินขอบเขตที่คุณต้องการ

— ahnbizcad

2

@ahnbizcad ดีด้วยสีพื้นหลังที่แตกต่างกันคุณสามารถใช้สีขาวหรือสีที่เพียงพอขึ้นอยู่กับวิธีที่เป็นพื้นหลัง

— hexalys

27

@ahnbizcad: ถ้าคุณไม่จำเป็นต้องสนับสนุน IE8 นี้เป็นทางออกที่ดีกว่า:background-clip: padding-box

— บิน

5

ความคิดเห็นของ Albin ที่นี่ต้องการคะแนนเสียงมากกว่านี้! นี่คือทางออกที่ดีที่สุด เส้นขอบโปร่งใสรวมกับ clip-background: padding-box (และระยะขอบลบบนภาชนะถ้าจำเป็นเพื่อจัดแนวขอบที่เหมาะสม) เป็นทางออกที่สมบูรณ์แบบ IE8 ไม่รองรับ flexbox ต่อไปดังนั้นการขาดการรองรับ background-clip จึงไม่สำคัญ

— ไบรอัน

74

โซลูชันนี้จะใช้ได้กับทุกกรณีแม้ว่าจะมีหลายแถวหรือองค์ประกอบจำนวนเท่าใดก็ตาม แต่จำนวนของส่วนควรจะเหมือนกันคุณต้องการ 4 ในแถวแรกและ 3 คือแถวที่สองมันจะไม่ทำงานเช่นนั้นพื้นที่สำหรับเนื้อหาที่ 4 จะว่างเปล่าภาชนะจะไม่เติม

เรากำลังใช้ display: grid; และคุณสมบัติของมัน

#box {
  display: grid;
  width: 100px;
  grid-gap: 5px;
  /* Space between items */
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /* Decide the number of columns and size */
}

.item {
  background: gray;
  width: 100%;
  /* width is not necessary only added this to understand that width works as 100% to the grid template allocated space **DEFAULT WIDTH WILL BE 100%** */
  height: 50px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

ขยายตัวอย่างข้อมูล

ข้อเสียของวิธีนี้อยู่ใน Mobile Opera Miniจะไม่ได้รับการสนับสนุนและในพีซีจะทำงานหลังจากIE10เท่านั้น

หมายเหตุสำหรับความเข้ากันได้ของเบราว์เซอร์ที่สมบูรณ์รวมถึง IE11 โปรดใช้ Autoprefixer

คำตอบเดิม ๆ

อย่าคิดว่ามันเป็นวิธีการแก้ปัญหาแบบเก่า แต่ก็ยังคงเป็นหนึ่งในวิธีที่ดีที่สุดถ้าคุณต้องการองค์ประกอบแถวเดียวและมันจะใช้ได้กับเบราว์เซอร์ทั้งหมด

วิธีการนี้ใช้โดยชุดค่าผสม CSS siblingดังนั้นคุณสามารถจัดการได้หลายวิธีเช่นกัน แต่หากชุดค่าผสมของคุณไม่ถูกต้องอาจทำให้เกิดปัญหาได้เช่นกัน

.item+.item{
  margin-left: 5px;
}

รหัสด้านล่างจะทำเคล็ดลับ ในวิธีนี้ไม่จำเป็นต้องมอบให้margin: 0 -5px;กับ#boxเสื้อคลุม

ตัวอย่างการทำงานสำหรับคุณ:

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 22px;
  height: 50px;
}
.item+.item{
 margin-left: 5px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

ขยายตัวอย่างข้อมูล

— เว็บเบอร์
แหล่งที่มา

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

— ToolmakerSteve

ตามคำถามนี้พวกเขาเพียงขอให้เติมช่องว่างอย่างถูกต้องด้วยองค์ประกอบลูกโดยไม่ต้องแฮ็คสิ่งที่ฉันทำโดยใช้กริดเราสามารถจัดการได้ตามที่grid-template-columnsเรากำหนดไม่ได้แบบไดนามิก ดังนั้นหากคุณให้คุณค่ากับ1fr 1fr 1fr 1frมันมันจะแบ่ง div ออกเป็น4fractionsและพยายามเติมองค์ประกอบของเด็กในแต่ละfractionsความรู้ของฉันนั่นเป็นวิธีเดียวที่เข้าgridมา สิ่งที่ฉันได้ระบุไว้ในคำตอบคือหากผู้ใช้ต้องการแบ่ง div เป็น 4 และใช้พวกเขาด้วยองค์ประกอบหลายอย่างแม้กระทั่งหลายแถวgidก็จะช่วยได้

— weBBer

69

คุณสามารถใช้& > * + *เป็นตัวเลือกเพื่อจำลองflex-gap(สำหรับบรรทัดเดียว):

#box { display: flex; width: 230px; outline: 1px solid blue; }
.item { background: gray; width: 50px; height: 100px; }

/* ----- Flexbox gap: ----- */

#box > * + * {
  margin-left: 10px;
}

<div id='box'>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
</div>

ขยายตัวอย่างข้อมูล

หากคุณต้องการสนับสนุนการตัดแบบเฟล็กซ์คุณสามารถใช้องค์ประกอบตัวหุ้ม:

.flex { display: flex; flex-wrap: wrap;  }
.box { background: gray; height: 100px; min-width: 100px; flex: auto; }
.flex-wrapper {outline: 1px solid red; }

/* ----- Flex gap 10px: ----- */

.flex > * {
  margin: 5px;
}
.flex {
  margin: -5px;
}
.flex-wrapper {
  width: 400px; /* optional */
  overflow: hidden; /* optional */
}

<div class='flex-wrapper'>
  <div class='flex'>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
  </div>
</div>

ขยายตัวอย่างข้อมูล

— ทำ Async
แหล่งที่มา

3

น้ำยาทำความสะอาด ใช้งานได้กับองค์ประกอบย่อยแบบยืดหยุ่นจำนวนเท่าใดก็ได้

— Konrad Gałęzowski

1

นี่คือสิ่งที่ฉันกำลังมองหาและใช้งานได้ดีสำหรับฉัน

— พอลโอเดียน

ประเด็นหนึ่งที่ควรสังเกตคือ*ผู้ปฏิบัติงานไม่ได้เพิ่มความจำเพาะเจาะจงอย่างที่คุณคาดหวัง ดังนั้นขึ้นอยู่กับ css ที่มีอยู่ของคุณคุณอาจต้องเพิ่มความเฉพาะเจาะจงของ.flex > *ตัวเลือกหรือเพิ่ม!importantในกฎหากมีตัวเลือกอื่นที่ใช้ระยะขอบกับองค์ประกอบนั้น

— พอลโอเดียน

ทางออกที่ดีที่สุด👍

— o01

26

สมมติว่าคุณต้องการตั้งค่า10pxช่องว่างระหว่างรายการคุณสามารถตั้งค่า.item {margin-right:10px;}ทั้งหมดและตั้งค่าในพื้นที่สุดท้าย.item:last-child {margin-right:0;}

นอกจากนี้คุณยังสามารถใช้พี่น้องทั่วไป~หรือ+ตัวเลือกพี่น้องคนถัดไปเพื่อกำหนดระยะขอบซ้ายบนรายการที่ไม่รวมรายการแรก.item ~ .item {margin-left:10px;}หรือการใช้งาน.item:not(:last-child) {margin-right: 10px;}

Flexbox นั้นฉลาดมากที่จะคำนวณใหม่โดยอัตโนมัติและกระจายตารางอย่างเท่าเทียมกัน

body {
  margin: 0;
}

.container {
  display: flex;
}

.item {
  flex: 1;
  background: gray;
  height: 50px;
}

.item:not(:last-child) {
  margin-right: 10px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

ขยายตัวอย่างข้อมูล

หากคุณต้องการให้เฟล็กซ์ห่อดูตัวอย่างได้

body {
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
}

.item {
  flex: 0 0 calc(50% - 10px);
  background: gray;
  height: 50px;
  margin: 0 0 10px 10px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

ขยายตัวอย่างข้อมูล

— สติกเกอร์
แหล่งที่มา

6

สิ่งนี้จะไม่ทำงานหากมีการห่อรายการเนื่องจาก:last-childจะไม่ส่งผลกระทบต่อเด็กคนสุดท้ายทุกคนที่ท้ายบรรทัดใช่ไหม?

— Flimm

2

@Flimm ฉันได้เพิ่มวิธีการทำงานกับ flex wrap ดูส่วนที่สองด้านบน

— สติกเกอร์

คำตอบที่ดีที่สุดสำหรับฉัน ... เรียบง่ายสะอาดและมีประสิทธิภาพ! ทำงานอย่างสมบูรณ์แบบด้วย

— แผ่นพับ

16

ฉันได้พบวิธีแก้ไขปัญหาโดยใช้ตัวเลือกพี่น้องทั่วไป ~และอนุญาตให้ทำรังแบบไม่สิ้นสุด

ดูตัวอย่างรหัสการทำงานของปากกานี้

โดยพื้นฐานแล้วภายในของคอนเทนเนอร์คอลัมน์เด็กทุกคนที่นำหน้าด้วยเด็กอีกคนหนึ่งจะได้รับระยะขอบสูงสุด ในทำนองเดียวกันภายในคอนเทนเนอร์ทุกแถวเด็กทุกคนที่นำหน้าด้วยอีกคนหนึ่งจะได้รับระยะขอบซ้าย

.box {
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
}

.box.columns {
  flex-direction: row;
}

.box.columns>.box~.box {
  margin-left: 5px;
}

.box.rows {
  flex-direction: column;
}

.box.rows>.box~.box {
  margin-top: 5px;
}

<div class="box columns">
  <div class="box" style="background-color: red;"></div>
  <div class="box rows">
    <div class="box rows">
      <div class="box" style="background-color: blue;"></div>
      <div class="box" style="background-color: orange;"></div>
      <div class="box columns">
        <div class="box" style="background-color: yellow;"></div>
        <div class="box" style="background-color: pink;"></div>
      </div>
    </div>
    <div class="box" style="background-color: green;"></div>
  </div>
</div>

ขยายตัวอย่างข้อมูล

— Simon Epskamp
แหล่งที่มา

สิ่งนี้ส่งผลให้เกิดรายการขนาดแตกต่างกันเนื่องจากระยะขอบที่ไม่ได้ใช้ทั่วโลก

— Steven Vachon

คุณจะต้องเพิ่ม CSS พิเศษเพื่อจัดการกับหน้าจอที่เล็กลงเพราะมันดูแปลก ๆ บนมือถือฉันจะใช้กฎ. box ~ .box กับหน้าจอที่ใหญ่ขึ้น 100% และระยะขอบด้านล่าง

— rhysclay

14

ต่อไปจากคำตอบของ sawa นี่เป็นรุ่นปรับปรุงเล็กน้อยที่ช่วยให้คุณกำหนดระยะห่างคงที่ระหว่างรายการโดยไม่มีระยะขอบโดยรอบ

http://jsfiddle.net/chris00/s52wmgtq/49/

รวมทั้งยังเป็นเวอร์ชั่น "-webkit-flex" ของ Safari

.outer1 {
    background-color: orange;
    padding: 10px;
}

.outer0 {
    background-color: green;
    overflow: hidden;
}

.container
{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;    
    -webkit-flex-wrap: wrap;
    background-color: rgba(0, 0, 255, 0.5);
    margin-left: -10px;
    margin-top: -10px;
}

.item
{
    flex-grow: 1;
    -webkit-flex-grow: 1;
    background-color: rgba(255, 0, 0, 0.5);
    width: 100px;
    padding: 10px;
    margin-left: 10px;
    margin-top: 10px;
    text-align: center;
    color: white;
}

<div class="outer1">
    <div class="outer0">
        <div class="container">
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
        </div>
    </div>
</div>

— คริส
แหล่งที่มา

2

นี่ไม่ใช่สิ่งเดียวกับตัวอย่างที่ให้ไว้ในคำถามใช่หรือไม่

— ฟอร์ด

10

ตามที่#ChromDevSummitมีการใช้งานgapคุณสมบัติสำหรับ Flexbox แม้ว่าในเวลานี้ (14 พฤศจิกายน 2019) จะรองรับเฉพาะใน Firefoxแต่ควรจะใช้งานใน Chrome ในไม่ช้า:

การสาธิตสด

ฉันจะอัปเดตคำตอบเมื่อไปถึง Chrome ด้วย

— Eliya Cohen
แหล่งที่มา

9

ฉันได้ใช้สิ่งนี้สำหรับคอลัมน์ที่ถูกห่อและความกว้างคงที่ กุญแจสำคัญที่นี่คือcalc()

ตัวอย่าง SCSS

$gap: 10px;

dl {
  display: flex;
  flex-wrap: wrap;
  padding: $gap/2;

  dt, dd {
    margin: $gap/2;}

  dt { // full width, acts as header
    flex: 0 0 calc(100% - #{$gap});}

  dd { // default grid: four columns 
    flex: 0 0 calc(25% - #{$gap});}

  .half { // hall width columns
    flex: 0 0 calc(50% - #{$gap});}

}

ตัวอย่าง Codepen แบบเต็ม

— Veiko Jääger
แหล่งที่มา

2

สิ่งนี้ยังคงเพิ่มรางน้ำไว้ก่อนและหลังรายการสุดท้ายซึ่ง OP ป้องกันไม่ให้ใช้ระยะขอบติดลบ

— เฮอร์แมน

2

Flexbox ไม่รองรับ calc () ภายในรายการ "flex" ใน IE 11

— Adam Šipický

ไม่สามารถใช้งานได้เสมอ ลองจินตนาการดูว่าหากจำเป็นต้องมีเขตแดนสำหรับเด็กโดยตรงด้วยเช่นกัน

— Andris

9

คอนเทนเนอร์แบบเฟล็กซ์ที่มี-x (ค่าลบ)และรายการเฟล็กซ์ที่มีอัตรากำไรขั้นต้น (บวก) หรือการแพ็ดคู่นำไปสู่ผลลัพธ์ภาพที่ต้องการ: รายการ Flex มีช่องว่างคงที่ 2x ระหว่างกันเท่านั้น

ดูเหมือนว่าจะเป็นเรื่องของการตั้งค่าไม่ว่าจะใช้ระยะขอบหรือช่องว่างภายในในรายการ flex

ในตัวอย่างนี้รายการ flex จะถูกปรับขนาดแบบไดนามิกเพื่อรักษาช่องว่างคงที่:

.flex-container { 
  margin: 0 -5px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.flex-item {
  margin: 0 5px; // Alternatively: padding: 0 5px;
  flex: 1 0 auto;
}

— ทิม
แหล่งที่มา

3

ขออภัยฉันไม่ได้รับ มีคำตอบอะไรใหม่ที่แนะนำซึ่งไม่ได้กล่าวถึงในคำถามโดยตรง

— ผู้ใช้

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

— ทิม

นี่คือตัวอย่างของ codepen ที่แสดงเอฟเฟกต์นี้ codepen.io/dalgard/pen/Dbnus

— pedalpete

8

ในที่สุดพวกเขาจะเพิ่มgapคุณสมบัติให้กับ flexbox คุณสามารถใช้กริด CSS แทนได้ซึ่งมีgapคุณสมบัติอยู่แล้วและมีเพียงแถวเดียว ดีกว่าจัดการกับระยะขอบ

— โอลลี่วิลเลียมส์
แหล่งที่มา

การสนทนาที่นี่: github.com/w3c/csswg-drafts/issues/1696 - พวกเขาจะปรับปรุงการตั้งชื่อข้ามทั้งคอลัมน์ CSS Grid, Flexbox และ CSS

— Frank Lämmer

6

CSS `gap`คุณสมบัติ :

มีgapคุณสมบัติ CSSใหม่สำหรับโครงร่างแบบหลายคอลัมน์ flexbox และกริดที่ใช้งานได้ในเบราว์เซอร์บางตัวในขณะนี้! (ดูฉันสามารถใช้ลิงค์ 1 ; ลิงค์ 2 )

#box {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  background-color: red;
  gap: 10px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

ขยายตัวอย่างข้อมูล

ในฐานะที่เป็นลายลักษณ์อักษรนี้ใช้งานได้เฉพาะใน Firefox เศร้า มันกำลังทำงานใน Chromeถ้าคุณเปิดใช้งาน "เปิดใช้งานคุณลักษณะแพลตฟอร์มเว็บทดลอง" about:flagsใน

— Flimm
แหล่งที่มา

5

การใช้ Flexbox ในโซลูชันของฉันฉันใช้justify-contentคุณสมบัติสำหรับองค์ประกอบหลัก (คอนเทนเนอร์) และฉันได้ระบุระยะขอบภายในflex-basisคุณสมบัติของรายการ ตรวจสอบข้อมูลโค้ดด้านล่าง:

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin-bottom: 10px;
}

.item {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #999;
}

.item-1-4 {
  flex-basis: calc(25% - 10px);
}

.item-1-3 {
  flex-basis: calc(33.33333% - 10px);
}

.item-1-2 {
  flex-basis: calc(50% - 10px);
}

<div class="container">
  <div class="item item-1-4">1</div>
  <div class="item item-1-4">2</div>
  <div class="item item-1-4">3</div>
  <div class="item item-1-4">4</div>
</div>
<div class="container">
  <div class="item item-1-3">1</div>
  <div class="item item-1-3">2</div>
  <div class="item item-1-3">3</div>
</div>
<div class="container">
  <div class="item item-1-2">1</div>
  <div class="item item-1-2">2</div>
</div>

ขยายตัวอย่างข้อมูล

— iClusterDev
แหล่งที่มา

5

ด้วย flexbox การสร้างรางน้ำเป็นอาการปวดโดยเฉพาะอย่างยิ่งเมื่อต้องห่อหุ้ม

คุณต้องใช้ระยะขอบติดลบ ( ดังแสดงในคำถาม ):

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}

... หรือแก้ไข HTML ( ดังที่แสดงในคำตอบอื่น ):

<div class='flex-wrapper'>
  <div class='flex'>
    <div class='box'></div>
    <div class='box'></div>
            ...
  </div>
</div>

... หรืออย่างอื่น.

ไม่ว่าในกรณีใดคุณต้องแฮ็กที่น่าเกลียดเพื่อให้มันทำงานได้เพราะ flexbox ไม่มีflex-gapคุณสมบัติ "" ( อย่างน้อยก็ในตอนนี้ )

อย่างไรก็ตามปัญหาของรางน้ำนั้นทำได้ง่ายและสะดวกด้วย CSS Grid Layout

ข้อมูลจำเพาะของกริดให้คุณสมบัติที่สร้างช่องว่างระหว่างรายการกริดในขณะที่ละเว้นพื้นที่ระหว่างรายการและคอนเทนเนอร์ คุณสมบัติเหล่านี้คือ:

grid-column-gap
grid-row-gap
grid-gap (ชวเลขสำหรับคุณสมบัติทั้งสองด้านบน)

เมื่อเร็ว ๆ นี้ข้อมูลจำเพาะได้รับการปรับปรุงเพื่อให้สอดคล้องกับCSS Box Alignment Moduleซึ่งมีชุดของคุณสมบัติการจัดตำแหน่งสำหรับใช้กับกล่องทุกรุ่น ดังนั้นคุณสมบัติตอนนี้:

column-gap
row-gap
gap (ชวเลข)

อย่างไรก็ตามเบราว์เซอร์ที่สนับสนุนกริดทั้งหมดไม่สนับสนุนคุณสมบัติที่ใหม่กว่าดังนั้นฉันจะใช้เวอร์ชันดั้งเดิมในการสาธิตด้านล่าง

นอกจากนี้หากต้องการเว้นวรรคระหว่างรายการและคอนเทนเนอร์ paddingบนคอนเทนเนอร์ก็ใช้ได้ดี (ดูตัวอย่างที่สามในตัวอย่างด้านล่าง)

จากสเป็ค:

10.1 รางน้ำที่: row-gap, column-gapและgap คุณสมบัติ

row-gapและcolumn-gapคุณสมบัติ (และพวกเขาgapจดชวเลข) เมื่อระบุไว้บนภาชนะตารางกำหนดรางระหว่างแถวตารางและคอลัมน์ตาราง ไวยากรณ์ของพวกเขาถูกกำหนดในCSS Box Alignment 3 §8 Gap ระหว่างกล่อง§8ช่องว่างระหว่างกล่อง

ผลกระทบของคุณสมบัติเหล่านี้จะเหมือนกับความหนาของเส้นกริดที่ได้รับผลกระทบที่ได้รับ: แทร็กกริดระหว่างสองเส้นกริดคือช่องว่างระหว่างรางที่เป็นตัวแทน

.box {
  display: inline-grid;
  grid-auto-rows: 50px;
  grid-template-columns: repeat(4, 50px);
  border: 1px solid black;
}

.one {
  grid-column-gap: 5px;
}

.two {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.three {
  grid-gap: 10px;
  padding: 10px;
}

.item {
  background: lightgray;
}

<div class='box one'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

<hr>

<div class='box two'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

<hr>

<div class='box three'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

ขยายตัวอย่างข้อมูล

ข้อมูลมากกว่านี้:

— Michael Benjamin
แหล่งที่มา

4

ทำไมไม่ทำเช่นนี้:

.item + .item {
    margin-left: 5px;
}

นี้ใช้ตัวเลือกพี่น้องที่อยู่ติดกันเพื่อให้ทุกองค์ประกอบยกเว้นแรกหนึ่ง.item margin-leftต้องขอบคุณ flexbox สิ่งนี้จะส่งผลในองค์ประกอบที่กว้างเท่า ๆ กัน สิ่งนี้สามารถทำได้ด้วยองค์ประกอบตำแหน่งในแนวตั้งและmargin-topแน่นอน

— tillsanders
แหล่งที่มา

8

สิ่งนี้จะทำงานได้ตราบใดที่ไอเท็มเฟล็กอยู่ในแถวเดียวเสมอ หากได้รับอนุญาตห่อก็อาจจะไม่เพียงพอ

— Nick F

4

นี่คือวิธีการแก้ปัญหาของฉันที่ไม่ต้องการตั้งค่าคลาสใด ๆ ในองค์ประกอบลูก:

.flex-inline-row {
    display: inline-flex;
    flex-direction: row;
}

.flex-inline-row.flex-spacing-4px > :not(:last-child) {
    margin-right: 4px;
}

การใช้งาน:

<div class="flex-inline-row flex-spacing-4px">
  <span>Testing</span>
  <span>123</span>
</div>

เทคนิคเดียวกันนี้สามารถใช้กับแถวและคอลัมน์แบบยืดหยุ่นปกตินอกเหนือจากตัวอย่างแบบอินไลน์ที่ระบุด้านบนและขยายด้วยคลาสสำหรับการเว้นวรรคอื่นนอกเหนือจาก 4px

— MK10
แหล่งที่มา

4

ฉันมักจะใช้ตัวดำเนินการ + สำหรับกรณีเช่นนี้

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}
.item + .item {
    margin-left: 5px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

ขยายตัวอย่างข้อมูล

— wutzebaer
แหล่งที่มา

3

ฉันพบว่าวิธีที่ง่ายที่สุดในการทำเช่นนี้คือใช้เปอร์เซ็นต์และอนุญาตให้ระยะขอบเพิ่มความกว้างของคุณ

ซึ่งหมายความว่าคุณจะจบลงด้วยสิ่งนี้ถ้าคุณใช้ตัวอย่างของคุณ

#box {
   display: flex;
}

.item {
   flex: 1 1 23%;
   margin: 0 1%;
}

หมายความว่าคุณค่าของคุณนั้นขึ้นอยู่กับความกว้างซึ่งอาจไม่ดีสำหรับทุกคน

— lukefrake
แหล่งที่มา

เพิ่งเจอโซลูชันนี้และก็ดีมาก ทำงานในกรณีของฉันอย่างน้อย (ปากกาสำหรับผู้ที่สามารถหาได้น่าสนใจ: codepen.io/rishatmuhametshin/pen/XXjpaV )

— rishat

2

นี่คือตารางองค์ประกอบของการ์ด UI ที่มีระยะห่างสมบูรณ์โดยใช้กล่องแบบยืดหยุ่น:

ฉันรู้สึกหงุดหงิดกับการเว้นระยะการ์ดด้วยตนเองโดยจัดการกับการขยายและระยะขอบด้วยผลลัพธ์ที่ไม่แน่นอน ดังนั้นนี่คือการรวมกันของคุณสมบัติ CSS ที่ฉันพบว่ามีประสิทธิภาพมาก:

.card-container {
  width: 100%;
  height: 900px;
  overflow-y: scroll;
  max-width: inherit;
  background-color: #ffffff;
  
  /*Here's the relevant flexbox stuff*/
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap; 
}

/*Supplementary styles for .card element*/
.card {
  width: 120px;
  height: 120px;
  background-color: #ffeb3b;
  border-radius: 3px;
  margin: 20px 10px 20px 10px;
}

<section class="card-container">
        <div class="card">

        </div>
        <div class="card">

        </div>
        <div class="card">

        </div>
        <div class="card">

        </div>
      </section>

ขยายตัวอย่างข้อมูล

หวังว่านี่จะช่วยให้ผู้คนปัจจุบันและอนาคต

— buildpax
แหล่งที่มา

อัปเดต: ระยะห่างนี้มีผลบังคับใช้สำหรับองค์ประกอบ HTML การแสดงผลบนมือถือที่ต้องมีการจัดตำแหน่งที่แน่นอน (เช่นกึ่งกลางซ้าย ฯลฯ ) หากคุณพบว่าตัวเองกำลังใช้เฟล็กบ็อกซ์สำหรับการพัฒนาอุปกรณ์พกพาฉันรู้สึกโล่งใจที่ได้เปลี่ยนมาใช้การจัดตำแหน่งโดยใช้มาร์จิ้นอย่างหมดจด

— buildpax

2

Columnify - คลาสเดี่ยวสำหรับคอลัมน์ N

Flexbox และ SCSS

.columnify {
  display: flex;

  > * {
    flex: 1;

    &:not(:first-child) {
      margin-left: 2rem;
    }
  }
}

Flexbox และ CSS

.columnify {
  display: flex;
}

.columnify > * {
  flex: 1;
}

.columnify > *:not(:first-child) {
  margin-left: 2rem;
}

<div class="columnify">
  <div style="display: inline-block; height: 20px; background-color: blue;"></div>
  <div style="display: inline-block; height: 20px; background-color: blue"></div>
  <div style="display: inline-block; height: 20px; background-color: blue"></div>
</div>

ขยายตัวอย่างข้อมูล

เล่นกับมันในJSFiddle

— zurfyx
แหล่งที่มา

1

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}
/* u mean utility */
.u-gap-10 > *:not(:last-child) {
  margin-right: 10px;
}

<div id='box' class="u-gap-10">
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

ขยายตัวอย่างข้อมูล

— อาโมวู
แหล่งที่มา

1

เพียงใช้.item + .itemตัวเลือกเพื่อจับคู่จากวินาที.item

#box {
  display: inline-flex;
  margin: 0 -5px;
}
.item {
  background: gray;
  width: 10px;
  height: 50px;
}

#box .item + .item {
  margin-left: 10px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

ขยายตัวอย่างข้อมูล

— Andrew Luca
แหล่งที่มา

1

สมมติว่า:

คุณต้องการโครงร่างกริด 4 คอลัมน์พร้อมการตัดคำ
จำนวนรายการไม่จำเป็นต้องคูณด้วย 4

กำหนดระยะขอบซ้ายบนทุกรายการยกเว้นรายการที่ 1, 5, 9 และอื่น ๆ ; และตั้งค่าความกว้างคงที่ในแต่ละรายการ หากระยะขอบซ้ายคือ 10px แต่ละแถวจะมีระยะขอบ 30px ระหว่าง 4 รายการความกว้างของเปอร์เซ็นต์ของรายการสามารถคำนวณดังนี้:

100% / 4 - horizontal-border - horizontal-padding - left-margin * (4 - 1) / 4

นี่เป็นวิธีแก้ปัญหาที่ดีสำหรับปัญหาเกี่ยวกับ flexbox แถวสุดท้าย

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 1em 0;
  background-color: peachpuff;
}

.item {
  margin-left: 10px;
  border: 1px solid;
  padding: 10px;
  width: calc(100% / 4 - 2px - 20px - 10px * (4 - 1) / 4);
  background-color: papayawhip;
}

.item:nth-child(4n + 1) {
  margin-left: 0;
}

.item:nth-child(n + 5) {
  margin-top: 10px;
}

<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

ขยายตัวอย่างข้อมูล

— ซัลมาน
แหล่งที่มา

1

แน่นอนมีวิธีที่ดีเป็นระเบียบและมี CSS เท่านั้น (ซึ่งอาจพิจารณาว่า "ดีกว่า")

จากคำตอบทั้งหมดที่โพสต์ที่นี่ฉันพบเพียงคำตอบที่ใช้ calc () สำเร็จแล้ว (โดย Dariusz Sikorski) แต่เมื่อถูกวางด้วย: "แต่มันล้มเหลวหากมีเพียง 2 รายการในแถวสุดท้าย" ไม่มีการขยายโซลูชัน

วิธีการแก้ปัญหานี้ตอบคำถามของ OP ด้วยทางเลือกอื่นในการกำหนดระยะขอบติดลบและแก้ไขปัญหาที่เกิดขึ้นกับ Dariusz

บันทึก:

ตัวอย่างนี้แสดงโครงร่างแบบ 3 คอลัมน์เท่านั้น
มันใช้calc()เพื่อให้เบราว์เซอร์ทำการคำนวณทางคณิตศาสตร์ตามที่ต้องการ - 100%/3 (แม้ว่า 33.3333% จะทำงานได้ดีเช่นกัน)และ (1em/3)*2 (แม้ว่า. 66em ควรทำงานได้ดีเช่นกัน)ยังจะทำงานได้ดี)
มันใช้::afterเพื่อรองแถวสุดท้ายหากมีองค์ประกอบน้อยกว่าคอลัมน์

.flex-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex-container:after {
  content: "";
}
.flex-container > div,
.flex-container:after {
  box-sizing: border-box;
  width: calc((100%/3) - ((1em/3)*2));
}
.flex-container > :nth-child(n + 4) {
  margin-top: 1em;
}

/* the following is just to visualize the items */
.flex-container > div,
.flex-container:after {
  font-size: 2em;
}
.flex-container {
  margin-bottom:4em;
}
.flex-container > div {
  text-align: center;
  background-color: #aaa;
  padding: 1em;
}
.flex-container:after {
  border: 1px dashed red;
}

<h2>Example 1 (2 elements)</h2>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
</div>

<h2>Example 2 (3 elements)</h2>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

ขยายตัวอย่างข้อมูล

นอกจากนี้ที่https://codepen.io/anon/pen/rqWagE

— aequalsb
แหล่งที่มา

1

คุณสามารถใช้คุณสมบัติใหม่gapได้ ฉันคัดลอกวางคำอธิบายที่พบในบทความนี้รวมถึงข้อมูลเพิ่มเติม

รูปแบบกริด CSS มีช่องว่าง (กริดก่อนหน้านี้ช่องว่าง) บางครั้ง โดยการระบุระยะห่างภายในขององค์ประกอบที่มีมากกว่าระยะห่างรอบองค์ประกอบเด็กช่องว่างแก้ปัญหารูปแบบทั่วไปจำนวนมาก ตัวอย่างเช่นด้วยช่องว่างคุณไม่ต้องกังวลกับระยะขอบบนองค์ประกอบย่อยที่ทำให้เกิดช่องว่างที่ไม่ต้องการรอบ ๆ ขอบขององค์ประกอบที่มี:

น่าเสียดายที่ตอนนี้มีเพียง FireFox เท่านั้นที่รองรับช่องว่างในรูปแบบเฟล็กซ์

@use postcss-preset-env {
  stage: 0;
  browsers: last 2 versions
}

section {
  width: 30vw;
  
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(12ch, 1fr));
  
  &[flex] {
    display: flex;
    flex-wrap: wrap;
  }
  
  margin-bottom: 3rem;
}

.tag {
  color: white;
  background: hsl(265 100% 47%);
  padding: .5rem 1rem;
  border-radius: 1rem;
}

button {
  display: inline-flex;
  place-items: center;
  gap: .5rem;
  background: hsl(265 100% 47%);
  border: 1px solid hsl(265 100% 67%);
  color: white;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-size: 1.25rem;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<section>
  <h1>Grid</h1> 
  <div class="tag">Awesome</div>
  <div class="tag">Coo</div>
  <div class="tag">Rad</div>
  <div class="tag">Math</div>
</section>
<br>
<section flex>
  <h1>Flex</h1>
  <div class="tag">Awesome</div>
  <div class="tag">Coo</div>
  <div class="tag">Rad</div>
  <div class="tag">Math</div>
</section>

ขยายตัวอย่างข้อมูล

— แอนเดรสพอล
แหล่งที่มา

gapถูกแนะนำในคำตอบแล้วที่นี่stackoverflow.com/a/58041749/2756409นอกจากนี้นี่ไม่ใช่ CSS

— TylerH

0

มันจะไม่ทำงานในทุกกรณี แต่ถ้าคุณมีความกว้างของลูกที่ยืดหยุ่น (%) และรู้จำนวนรายการต่อแถวคุณสามารถระบุระยะขอบขององค์ประกอบที่จำเป็นได้อย่างหมดจดโดยใช้nth-childตัวเลือก / s

ขึ้นอยู่กับสิ่งที่คุณหมายถึงโดย "ดีกว่า" วิธีนี้ไม่จำเป็นต้องใช้มาร์กอัป wrapper เพิ่มเติมสำหรับองค์ประกอบลูกหรือองค์ประกอบเชิงลบ - แต่สิ่งเหล่านั้นทั้งสองมีที่ของพวกเขา

section {
  display: block
  width: 100vw;
}
.container {
  align-content: flex-start;
  align-items: stretch;
  background-color: #ccc;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  width: 100%;
}

.child-item {
  background-color: #c00;
  margin-bottom: 2%;
  min-height: 5em;
  width: 32%;
}

.child-item:nth-child(3n-1) {
  margin-left: 2%;
  margin-right: 2%;
}

<html>
  <body>
      <div class="container">
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
      </div>
   </body>
</html>

ขยายตัวอย่างข้อมูล

— jnmrobinson
แหล่งที่มา

ไม่ตอบสนอง ใช้ได้เฉพาะกับพาเรนต์ความกว้างคงที่เท่านั้น

— สีเขียว

1

OP ไม่ขอโซลูชันที่ตอบสนองและตัวอย่างของพวกเขาใช้ความกว้างของฟิกซ์ ระบุว่าสิ่งนี้ใช้ค่า% เป็นเรื่องง่ายที่จะโต้แย้งว่าสิ่งนี้ตอบสนองได้เนื่องจากไอเท็มจะปรับให้เข้ากับขนาดของพาเรนต์ที่กำหนดโดยเปอร์เซ็นต์

— jnmrobinson

0

ฉันเจอปัญหาเดียวกันก่อนหน้านี้จากนั้นก็พบคำตอบสำหรับสิ่งนี้ หวังว่ามันจะช่วยให้ผู้อื่นสำหรับการอ้างอิงในอนาคต

คำตอบสั้น ๆ สั้น ๆ เพิ่มเส้นขอบให้กับรายการเฟล็กซ์ลูกของคุณ จากนั้นคุณสามารถระบุระยะขอบระหว่างไอเท็มแบบยืดหยุ่นกับสิ่งที่คุณต้องการ ในตัวอย่างฉันใช้สีดำเพื่อเป็นภาพประกอบคุณสามารถใช้ 'โปร่งใส' หากต้องการ

#box {
  display: flex;
  width: 100px;
  /* margin: 0 -5px; *remove this*/
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  /* margin: 0 5px; *remove this*/
  border: 1px solid black; /* add this */
}
.item.special{ margin: 0 10px; }

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item special'></div>
</div>

ขยายตัวอย่างข้อมูล

— Tunasing
แหล่งที่มา

0

เคล็ดลับมาร์จิ้นติดลบบนกล่องคอนเทนเนอร์ใช้งานได้ดีมาก นี่เป็นอีกตัวอย่างที่ใช้งานได้ดีกับการสั่งซื้อการห่อและสิ่งที่ไม่

.container {
   border: 1px solid green;
   width: 200px;
   display: inline-block;
}

#box {
  display: flex;
  flex-wrap: wrap-reverse;
  margin: -10px;
  border: 1px solid red;
}
.item {
  flex: 1 1 auto;
  order: 1;
  background: gray;
  width: 50px;
  height: 50px;
  margin: 10px;
  border: 1px solid blue;
}
.first {
  order: 0;
}

<div class=container>
<div id='box'>
  <div class='item'>1</div>
  <div class='item'>2</div>
  <div class='item first'>3*</div>
  <div class='item'>4</div>
  <div class='item'>5</div>
</div>
</div>

ขยายตัวอย่างข้อมูล

— cghislai
แหล่งที่มา

วิธีที่ดีกว่าในการกำหนดระยะห่างระหว่างรายการ flexbox

Flexbox และ css Calc พร้อมการรองรับหลายแถว

คำตอบเดิม ๆ

CSS gapคุณสมบัติ :

Columnify - คลาสเดี่ยวสำหรับคอลัมน์ N

Flexbox และ SCSS

Flexbox และ CSS

CSS `gap`คุณสมบัติ :