ใน CSS Flexbox เหตุใดจึงไม่มีคุณสมบัติ "ปรับรายการ" และ "จัดชิดขอบ"

พิจารณาแกนหลักและแกนไขว้ของเฟล็กซ์คอนเทนเนอร์:

                                                                                                                                                   _{ที่มา: W3C}

ในการจัดแนวไอเท็มแบบเฟล็กซ์ตามแกนหลักมีหนึ่งคุณสมบัติ:

• justify-content

ในการจัดแนวไอเท็มแบบเฟล็กซ์ตามแนวแกนข้ามมีคุณสมบัติสามอย่าง:

• align-content
• align-items
• align-self

ในภาพด้านบนแกนหลักเป็นแนวนอนและแกนไขว้เป็นแนวตั้ง นี่เป็นทิศทางเริ่มต้นของ flex container

อย่างไรก็ตามทิศทางเหล่านี้สามารถเปลี่ยนได้อย่างง่ายดายด้วยflex-directionคุณสมบัติ

/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */    
flex-direction: column;
flex-direction: column-reverse;

(แกนไขว้จะตั้งฉากกับแกนหลักเสมอ)

ประเด็นของฉันในการอธิบายวิธีการทำงานของแกนคือดูเหมือนจะไม่มีอะไรพิเศษเกี่ยวกับทิศทางใดทิศทางหนึ่ง แกนหลักแกนไขว้พวกเขาทั้งสองมีความสำคัญเท่าเทียมกันและflex-directionทำให้สามารถสลับไปมาได้ง่าย

เหตุใดแกนไขว้จึงได้รับคุณสมบัติการจัดตำแหน่งสองแบบเพิ่มเติม

ทำไมalign-contentและถูกalign-itemsรวมเข้าในคุณสมบัติเดียวสำหรับแกนหลัก?

ทำไมแกนหลักไม่ได้รับjustify-selfคุณสมบัติ?

สถานการณ์ที่คุณสมบัติเหล่านี้มีประโยชน์:

• วางสิ่งของแบบยืดหยุ่นไว้ที่มุมของภาชนะบรรจุแบบยืดหยุ่น
  #box3 { align-self: flex-end; justify-self: flex-end; }

• การจัดกลุ่มของรายการ flex จัดชิดขวา ( justify-content: flex-end) แต่มีการจัดเรียงรายการแรกทางซ้าย ( justify-self: flex-start)

  พิจารณาส่วนหัวที่มีกลุ่มของรายการ nav และโลโก้ ด้วยjustify-selfโลโก้ที่สามารถจัดชิดซ้ายในขณะที่รายการ nav อยู่ไกลและสิ่งทั้งหมดปรับอย่างราบรื่น ("งอ") ขนาดหน้าจอที่แตกต่างกัน

• ในแถวของสามไอเท็มเฟล็กซ์ติดไอเท็มกลางเข้ากับกึ่งกลางของคอนเทนเนอร์ ( justify-content: center) และจัดเรียงไอเท็มที่อยู่ติดกันกับขอบคอนเทนเนอร์ ( justify-self: flex-startและjustify-self: flex-end)

  โปรดทราบว่าค่าspace-aroundและspace-betweenใน justify-contentสถานที่ให้บริการจะไม่ให้รายการกึ่งกลางเกี่ยวกับภาชนะถ้ารายการที่อยู่ติดกันมีความกว้างที่แตกต่างกัน

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>note that the middlebox will only be truly centered if adjacent boxes are equal width</p>

รุ่น jsFiddle

ขณะที่เขียนนี้มีการกล่าวถึงไม่มีjustify-selfหรือjustify-itemsในflexbox ข้อมูลจำเพาะ

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

                                                                                                                                                   _{ที่มา: W3C}

คุณจะพบว่าjustify-selfและjustify-itemsมีการพิจารณา ... แต่ไม่ได้สำหรับ flexbox

ฉันจะจบด้วยการย้ำคำถามหลัก:

เหตุใดจึงไม่มีคุณสมบัติ "ปรับรายการ" และ "จัดชิดขอบ"

วิธีการจัดแนวรายการแบบยืดหยุ่นตามแกนหลัก

ตามที่ระบุไว้ในคำถาม:

ในการจัดแนวไอเท็มแบบเฟล็กซ์ตามแกนหลักมีหนึ่งคุณสมบัติ: justify-content

กับรายการดิ้นจัดตามแกนข้ามมีสามคุณสมบัติ: align-content, และalign-itemsalign-self

คำถามนั้นถามว่า:

เหตุใดจึงไม่มีjustify-itemsและjustify-selfคุณสมบัติ?

หนึ่งคำตอบอาจเป็นเพราะพวกเขาไม่จำเป็น

ข้อกำหนด flexboxให้สองวิธีการในการจัดตำแหน่งรายการดิ้นตามแกนหลัก

1. justify-contentคุณสมบัติคำหลักและ
2. auto อัตรากำไรขั้นต้น

ปรับเนื้อหา

justify-contentคุณสมบัติสอดคล้องรายการดิ้นตามแกนหลักของภาชนะดิ้น

มันถูกนำไปใช้กับ flex container แต่มีผลกับรายการ flex เท่านั้น

มีตัวเลือกการจัดตำแหน่งห้าตัว:

• flex-start ~ รายการที่ยืดหยุ่นจะถูกบรรจุจนถึงจุดเริ่มต้นของบรรทัด

  

• flex-end ~ รายการที่ยืดหยุ่นจะถูกบรรจุลงในตอนท้ายของบรรทัด

  

• center ~ รายการที่ยืดหยุ่นจะถูกบรรจุเข้าหากึ่งกลางของบรรทัด

  

• space-between~ รายการที่ยืดหยุ่นจะเว้นระยะเท่ากันโดยรายการแรกจัดชิดขอบหนึ่งของคอนเทนเนอร์และรายการสุดท้ายจัดชิดขอบตรงกันข้าม ขอบที่ใช้โดยรายการแรกและสุดท้ายจะขึ้นอยู่กับflex-directionและโหมดการเขียน ( ltrหรือrtl)

  

• space-around~ เหมือนกับspace-betweenยกเว้นที่มีช่องว่างขนาดครึ่งทั้งสองด้าน

  

ระยะขอบอัตโนมัติ

ด้วยautoระยะขอบรายการที่ยืดหยุ่นสามารถจัดกึ่งกลางเว้นระยะห่างหรือบรรจุลงในกลุ่มย่อย

ซึ่งแตกต่างจากjustify-contentซึ่งใช้กับ flex คอนเทนเนอร์autoระยะขอบไปในรายการ flex

มันทำงานโดยใช้พื้นที่ว่างทั้งหมดในทิศทางที่กำหนด

จัดกลุ่มรายการที่ยืดหยุ่นไปทางขวา แต่รายการแรกอยู่ทางซ้าย

สถานการณ์จากคำถาม:

• การจัดกลุ่มของรายการ flex จัดชิดขวา ( justify-content: flex-end) แต่มีการจัดเรียงรายการแรกทางซ้าย ( justify-self: flex-start)

  พิจารณาส่วนหัวที่มีกลุ่มของรายการ nav และโลโก้ ด้วย justify-selfโลโก้ที่สามารถจัดชิดซ้ายในขณะที่รายการ nav อยู่ไกลและสิ่งทั้งหมดปรับอย่างราบรื่น ("งอ") ขนาดหน้าจอที่แตกต่างกัน

สถานการณ์ที่มีประโยชน์อื่น ๆ :

วางไอเท็มเฟล็กซ์ที่มุม

สถานการณ์จากคำถาม:

• วางรายการที่ยืดหยุ่นในมุม .box { align-self: flex-end; justify-self: flex-end; }

จัดรายการที่อยู่กึ่งกลางในแนวตั้งและแนวนอน

margin: autoเป็นทางเลือกและjustify-content: centeralign-items: center

แทนรหัสนี้บนเฟล็กคอนเทนเนอร์:

.container {
    justify-content: center;
    align-items: center;
}

คุณสามารถใช้สิ่งนี้กับรายการเฟล็กซ์:

.box56 {
    margin: auto;
}

ทางเลือกนี้จะเป็นประโยชน์เมื่อกลางรายการดิ้นที่ล้นภาชนะ

จัดรายการที่อยู่กึ่งกลางและจัดรายการที่สองที่อยู่ตรงกลางระหว่างส่วนที่หนึ่งกับขอบ

flex container จัดเรียงรายการ flex โดยกระจายพื้นที่ว่าง

ดังนั้นเพื่อสร้างสมดุลที่เท่าเทียมกันดังนั้นรายการกลางสามารถอยู่กึ่งกลางในคอนเทนเนอร์ที่มีรายการเดียวข้างต้องมีการถ่วงดุล

ในตัวอย่างด้านล่างจะมีการแนะนำรายการเฟล็กซ์ที่สามที่มองไม่เห็น (กล่อง 61 & 68) เพื่อปรับยอดรายการ "ของจริง" (กล่อง 63 & 66)

แน่นอนวิธีนี้ไม่มีอะไรดีในแง่ของความหมาย

หรือคุณสามารถใช้องค์ประกอบหลอกแทนองค์ประกอบ DOM ที่แท้จริง หรือคุณสามารถใช้การกำหนดตำแหน่งแบบสัมบูรณ์ ทั้งสามวิธีครอบคลุมที่นี่: ศูนย์และรายการ flex จัดชิดด้านล่าง

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

จัดรายการที่อยู่กึ่งกลางเมื่อรายการที่อยู่ติดกันมีขนาดแตกต่างกัน

สถานการณ์จากคำถาม:

• ในแถวของสามไอเท็มเฟล็กซ์ติดไอเท็มกลางเข้ากับกึ่งกลางของคอนเทนเนอร์ ( justify-content: center) และจัดเรียงไอเท็มที่อยู่ติดกันกับขอบคอนเทนเนอร์ ( justify-self: flex-startและ justify-self: flex-end)

  โปรดทราบว่าค่าspace-aroundและspace-betweenในjustify-contentสถานที่ให้บริการจะไม่ให้รายการกึ่งกลางในความสัมพันธ์กับภาชนะถ้ารายการที่อยู่ติดกันมีความกว้างที่แตกต่างกัน ( ดูตัวอย่าง )

ตามที่ระบุไว้ยกเว้นว่ารายการที่ยืดหยุ่นทั้งหมดมีความกว้างหรือความสูงเท่ากัน (ขึ้นอยู่กับflex-direction) รายการกลางไม่สามารถอยู่ตรงกลางอย่างแท้จริง ปัญหานี้ทำให้เป็นกรณีที่แข็งแกร่งสำหรับjustify-selfคุณสมบัติ (ออกแบบมาเพื่อจัดการงานแน่นอน)

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>The middle box will be truly centered only if adjacent boxes are equal width.</p>

ต่อไปนี้เป็นสองวิธีในการแก้ไขปัญหานี้:

โซลูชัน # 1: การจัดตำแหน่งแบบสัมบูรณ์

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

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

ในตัวอย่างด้านล่างรายการกลางอยู่กึ่งกลางตำแหน่งที่แน่นอนและรายการด้านนอกยังคงอยู่ในลำดับ แต่รูปแบบเดียวกันสามารถทำได้ในแบบย้อนกลับ: จัดกึ่งกลางของรายการด้วยjustify-content: centerและวางตำแหน่งรายการด้านนอกอย่างแน่นอน

โซลูชัน # 2: ตู้บรรจุ Flex แบบซ้อน (ไม่มีตำแหน่งแน่นอน)

.container {
  display: flex;
}
.box {
  flex: 1;
  display: flex;
  justify-content: center;
}
.box71 > span { margin-right: auto; }
.box73 > span { margin-left: auto;  }

/* non-essential */
.box {
  align-items: center;
  border: 1px solid #ccc;
  background-color: lightgreen;
  height: 40px;
}

<div class="container">
  <div class="box box71"><span>71 short</span></div>
  <div class="box box72"><span>72 centered</span></div>
  <div class="box box73"><span>73 loooooooooooooooong</span></div>
</div>

นี่คือวิธีการทำงาน:

• div ( .container) ระดับบนสุดเป็นคอนเทนเนอร์แบบยืดหยุ่น
• div เด็กแต่ละคน (.box )ขณะนี้เป็นรายการที่ยืดหยุ่น
• แต่ละ .boxรายการจะได้รับflex: 1เพื่อกระจายพื้นที่คอนเทนเนอร์อย่างเท่าเทียมกัน
• ตอนนี้ไอเท็มกำลังกินพื้นที่ทั้งหมดในแถวและมีความกว้างเท่ากัน
• ทำให้แต่ละรายการเป็นเฟล็กซ์ (ซ้อน) และเพิ่ม justify-content: centerภาชนะดิ้นและเพิ่ม
• ตอนนี้แต่ละคน spanองค์ประกอบจะเป็นรายการเฟล็กซ์กึ่งกลาง
• ใช้autoระยะขอบโค้งงอเพื่อเลื่อนด้านนอกspanซ้ายและขวา

คุณสามารถละทิ้งjustify-contentและใช้งานได้autoระยะขอบได้โดยเฉพาะ

แต่justify-contentสามารถทำงานที่นี่ได้เพราะautoระยะขอบมีลำดับความสำคัญเสมอ จากสเป็ค:

8.1 สอดคล้องกับauto ระยะขอบ

ก่อนที่จะจัดตำแหน่งผ่านjustify-contentและalign-selfพื้นที่ว่างบวกใด ๆ จะถูกกระจายไปยังระยะขอบอัตโนมัติในมิตินั้น

justify-content: space-same (แนวคิด)

ย้อนกลับไปjustify-contentสักครู่นี่เป็นแนวคิดสำหรับอีกทางเลือกหนึ่ง

• space-same~ ไฮบริดของและspace-between space-aroundรายการแบบยืดหยุ่นจะเว้นระยะเท่ากัน (เช่นspace-between) ยกเว้นช่องว่างขนาดครึ่งทั้งสองด้าน (เช่นspace-around) จะมีช่องว่างขนาดเต็มทั้งสองด้าน

รูปแบบนี้สามารถทำได้ด้วย::beforeและ::afterหลอกองค์ประกอบบนภาชนะดิ้น

^{(เครดิต: @oriolสำหรับรหัสและ@crlสำหรับป้ายกำกับ)}

อัปเดต:เบราว์เซอร์เริ่มนำไปใช้งานspace-evenlyซึ่งประสบความสำเร็จตามที่กล่าวข้างต้น ดูโพสต์นี้สำหรับรายละเอียด: ช่องว่างที่เท่ากันระหว่างรายการเฟล็ก

PLAYGROUND (รวมรหัสสำหรับตัวอย่างด้านบนทั้งหมด)

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

ฉันเชื่อว่าเมื่อมีหลายรายการในแกนวิธีที่สมเหตุสมผลที่สุดในjustify-selfการประพฤติคือการจัดแนวตัวเองกับเพื่อนบ้านที่ใกล้ที่สุด (หรือขอบ) ดังที่แสดงด้านล่าง

ฉันหวังว่า W3C จะแจ้งให้ทราบล่วงหน้าและอย่างน้อยก็จะพิจารณามัน =)

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

ความสะดวกในการทำรูปแบบที่น่ากลัวจะไม่มีที่สิ้นสุด, ดูที่นี้ "ซับซ้อน" ตัวอย่างเช่น

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

ในการเริ่มต้นให้เราสมมติว่า flex container ของเราคือบรรทัดเดียว ( flex-wrap: nowrap) ในกรณีนี้มีความแตกต่างการจัดตำแหน่งอย่างชัดเจนระหว่างแกนหลักและแกนไขว้ - มีหลายรายการซ้อนกันในแกนหลัก แต่มีเพียงหนึ่งรายการที่ซ้อนกันในแกนไขว้ ดังนั้นจึงมีเหตุผลที่จะมี "align-self" แบบกำหนดเองได้ต่อรายการในแกนไขว้ (เนื่องจากแต่ละรายการมีการจัดตำแหน่งแยกกันด้วยตนเอง) ในขณะที่มันไม่สมเหตุสมผลในแกนหลัก (เนื่องจากมี มีการจัดรายการให้สอดคล้องกัน)

สำหรับ flexbox แบบหลายบรรทัดตรรกะเดียวกันนี้ใช้กับ "flex line" แต่ละรายการ ในบรรทัดที่กำหนดรายการจะถูกจัดเรียงแยกกันในแกนไขว้ (เนื่องจากมีเพียงหนึ่งรายการต่อบรรทัดในแกนไขว้), และรวมกันในแกนหลัก

นี่คือวิธีการใช้ถ้อยคำมันอีกดังนั้นทั้งหมดของ*-selfและ*-contentคุณสมบัติเกี่ยวกับวิธีการกระจายพื้นที่พิเศษรอบ ๆ สิ่ง แต่ความแตกต่างที่สำคัญคือ*-selfรุ่นนั้นใช้สำหรับกรณีที่มีเพียงสิ่งเดียวในแกนนั้นและ*-contentรุ่นนั้นใช้สำหรับเมื่อมีหลายสิ่งที่อาจเกิดขึ้นในแกนนั้น The-สิ่งหนึ่งเมื่อเทียบกับสถานการณ์หลายสิ่ง-มีความแตกต่างกันของปัญหาที่เกิดขึ้นและเพื่อให้พวกเขามีความแตกต่างกันของตัวเลือกที่ใช้ได้ - เช่นspace-around/ space-betweenค่าทำให้ความรู้สึกแต่ไม่ได้สำหรับ*-content*-self

SO: ในแกนหลักของเฟล็กบ็อกซ์มีหลายสิ่งหลายอย่างที่จะกระจายพื้นที่รอบ ๆ ดังนั้น*-contentคุณสมบัติจึงสมเหตุสมผล แต่ไม่ใช่*-selfคุณสมบัติ

ในทางตรงกันข้ามในแกนไขว้เรามีทั้ง a *-selfและ*-contentคุณสมบัติ หนึ่งกำหนดวิธีที่เราจะกระจายพื้นที่รอบๆเส้นโค้งจำนวนมาก ( align-content) ในขณะที่อีกอัน ( align-self) กำหนดวิธีกระจายพื้นที่รอบ ๆ ชิ้นส่วนที่ยืดหยุ่นในแกนข้ามภายในเส้นโค้งที่กำหนด

(ฉันไม่สนใจ*-itemsคุณสมบัติที่นี่เนื่องจากเป็นเพียงการตั้งค่าเริ่มต้น*-self)

ฉันรู้ว่านี่ไม่ได้ใช้ flexbox แต่สำหรับกรณีการใช้งานอย่างง่ายของสามรายการ (หนึ่งที่อยู่ทางซ้ายหนึ่งที่กึ่งกลางหนึ่งที่ด้านขวา) สิ่งนี้สามารถทำได้อย่างง่ายดายโดยใช้display: gridกับผู้ปกครองgrid-area: 1/1/1/1;เด็กและjustify-selfสำหรับการวางตำแหน่ง ของเด็กเหล่านั้น

<div style="border: 1px solid red; display: grid; width: 100px; height: 25px;">
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: left;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: center;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: right;"></div>
</div>

ฉันเพิ่งพบวิธีแก้ปัญหาของตัวเองหรืออย่างน้อยก็เป็นปัญหาของฉัน
ฉันใช้justify-content: space-aroundแทนjustify-content: space-between;แทน

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