วิธีการปรับรายการ flexbox เดียว (แทนที่ justify-content)

283

คุณสามารถแทนที่align-itemsด้วยalign-selfสำหรับรายการที่ยืดหยุ่น ฉันกำลังมองหาวิธีที่จะแทนที่justify-contentรายการที่ยืดหยุ่น

หากคุณมี flexbox container justify-content:flex-endแต่คุณต้องการให้ไอเท็มแรกเป็นแบบjustify-content: flex-startนั้นทำได้อย่างไร?

นี่คือคำตอบที่ดีที่สุดโดยโพสต์นี้: https://stackoverflow.com/a/33856609/269396

css flexbox

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

2

ใช้autoระยะขอบ ดูกล่อง # 26 ที่นี่: stackoverflow.com/a/33856609/3597276

— Michael Benjamin

ขอบคุณสำหรับการลิงก์ไปยังคำตอบที่มีประโยชน์ที่สุด!

— เบรดี้ดาวลิ่ง

549

ดูเหมือนจะไม่ได้มีjustify-selfแต่คุณสามารถบรรลุการตั้งค่าผลลัพธ์ที่คล้ายกันที่เหมาะสมmarginกับauto¹ เช่น. สำหรับflex-direction: row(ค่าเริ่มต้น) คุณควรตั้งค่าmargin-right: autoให้จัดแนวเด็กไปทางซ้าย

.container {
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: flex-end;
}
.block {
  width: 50px;
  background: tomato;
}
.justify-start {
  margin-right: auto;
}

<div class="container">
  <div class="block justify-start"></div>
  <div class="block"></div>
</div>

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

¹ลักษณะการทำงานนี้จะถูกกำหนดโดยสเปค flexbox

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

51

เทคนิคนี้ยอดเยี่ยมและใช้งานได้ในแนวตั้ง ตัวอย่างเช่นคุณต้องการให้องค์ประกอบสุดท้ายภายในคอนเทนเนอร์ความสูงคงที่ติดอยู่ด้านล่าง คุณสามารถใช้ `` '.container {flex-direction: column; justify-content: flex-start}. รายการสุดท้าย {margin-top: auto} `` `

— Christian Schlensker

6

@krulik พฤติกรรมนี้ถูกกำหนดโดยข้อมูลจำเพาะของFlexbox

— Pavlo

7

หลังจากการสอบสวนเพิ่มเติมบางอย่างjustify-selfอาจไม่มีอะไรเกี่ยวข้องflexboxแต่ควรใช้กับcss gridsแต่ฉันไม่แน่ใจ ฉันดูเหมือนจะไม่สามารถใช้งานได้ใน Chrome ด้วย flexbox

— Jake Wilson

8

ถ้าฉันต้องการให้รายการหนึ่งอยู่ทางซ้ายและอีกอันหนึ่งอยู่ตรงกลาง

— Fahmi

3

"ในรูปแบบเฟล็กบ็อกซ์คุณสมบัตินี้จะถูกละเว้น" - นำมาจาก mozilla docs ในการปรับตัว

— Finlay Percy

19

AFAIK ไม่มีคุณสมบัติสำหรับสิ่งนั้นใน specs แต่นี่เป็นเคล็ดลับที่ฉันใช้: ตั้งค่าองค์ประกอบคอนเทนเนอร์ (รายการที่มีdisplay:flex) เป็นjustify-content:space-around แล้วเพิ่มองค์ประกอบพิเศษระหว่างรายการแรกและรายการที่สองและตั้งเป็นflex-grow:10(หรือบางรายการ ค่าอื่น ๆ ที่ใช้งานได้กับการตั้งค่าของคุณ)

แก้ไข: หากรายการมีการจัดตำแหน่งอย่างแน่นหนามันเป็นความคิดที่ดีที่จะเพิ่มflex-shrink: 10;องค์ประกอบเพิ่มเติมเช่นกันดังนั้นรูปแบบจะตอบสนองอย่างถูกต้องบนอุปกรณ์ขนาดเล็ก

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

1

มันใช้งานได้โดยไม่ระบุความกว้าง (อย่างน้อยมันก็ทำในสถานการณ์ของฉัน)

— eeglbalazs

ลองmin-width: 0

— The Dembinski

13

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

.space-between {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}
.default-flex {
  border: 1px solid blue;
  display: flex;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

<div class="space-between">
  <div class="child">1</div>
  <div class="default-flex">
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</div>

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

หรือถ้าคุณกำลังทำสิ่งเดียวกันกับ flex-start และ flex-end ที่กลับด้านคุณเพียงแค่สลับลำดับของ container-flex เริ่มต้นและลูกคนเดียว

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

5

ดูเหมือนว่าjustify-selfจะมาถึงเร็ว ๆ นี้เบราว์เซอร์ มีบทความอยู่ในMDNแล้ว ในขณะที่เขียนนี้การสนับสนุนเบราว์เซอร์ไม่ดี

เกี่ยวกับการแก้ปัญหาส่วนต่าง: ฉันมีตาราง Flexbox พร้อมช่องว่าง ไม่มีflex-gapFlexboxคุณสมบัติ (หรือยัง) ดังนั้นสำหรับท่อระบายน้ำฉันใช้ paddings และระยะขอบดังนั้นmargin: autoจำเป็นต้องเขียนทับขอบอื่น ๆ ...

— Frank Lämmer
แหล่งที่มา

7

น่าเศร้าIn flexbox layouts, this property is ignored

— Sphinxxx

1

@Sphinxxx ใช่ แต่justify-self ใช้งานได้ในdisplay: gridคอนเทนเนอร์ มันเป็นเรื่องที่ผ่านมาเช่น flexbox เพื่อช่วยให้การวางตำแหน่งที่อุดมไปด้วยเช่นalign-items, เช่นเดียวกับบางคุณสมบัติเพิ่มเติมเช่นหนึ่งที่เราต้องการที่นี่align-self justify-selfสิ่งที่ฉันแนะนำคือการใช้ flexbox ทุกที่เพียงพอ แต่ถ้ามันขาดอะไรบางอย่างตารางส่วนใหญ่จะมีสิ่งที่คุณกำลังมองหา (เช่นจัดแนวเด็กหนึ่งคนไปที่ center-x และ center-y และอีกคนไปทางขวา -x center-y - flexbox มีmargin-left: autoซ้าย + ขวาง่าย แต่ไม่ใช่กึ่งกลาง + ขวา) ตัวอย่าง: stackoverflow.com/a/57128453 / 2441655

— Venryx

1

สำหรับสถานการณ์ที่ทราบความกว้างของรายการที่คุณต้องการflex-endคุณสามารถตั้งค่าความยืดหยุ่นเป็น "0 0 ## px" และตั้งค่ารายการที่คุณต้องการflex-startด้วยflex:1

สิ่งนี้จะทำให้flex-startไอเท็มหลอกใส่ภาชนะเพียงแค่ฟอร์แมตมันtext-align:leftหรืออะไรก็ตาม

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

0

margin: 0 autoฉันจะแก้ไขกรณีที่คล้ายกันโดยการตั้งค่ารูปแบบรายการภายในเพื่อ
สถานการณ์: justify-content: space-betweenเมนูของฉันมักจะมีสามปุ่มซึ่งในกรณีที่พวกเขาจะต้อง แต่เมื่อมีปุ่มเดียวมันจะจัดกึ่งกลางแทนทางซ้าย

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