ความแตกต่างระหว่างการจัดตำแหน่งเนื้อหาและการจัดตำแหน่งรายการคืออะไร?

ใครสามารถแสดงให้ฉันเห็นความแตกต่างระหว่างalign-itemsและalign-content?

align-itemsทรัพย์สินของดิ้นกล่องสอดคล้องรายการภายในภาชนะดิ้นตามแกนข้ามเช่นเดียวกับjustify-contentไม่พร้อมแกนหลัก (สำหรับค่าเริ่มต้นflex-direction: rowแกนไขว้จะสอดคล้องกับแนวตั้งและแกนหลักสอดคล้องกับแนวนอนโดยflex-direction: columnที่ทั้งสองจะถูกสลับตามลำดับ)

นี่คือตัวอย่างของalign-items:centerลักษณะที่ปรากฏ:

แต่align-contentสำหรับกล่องที่มีความยืดหยุ่นหลายบรรทัด ไม่มีผลเมื่อรายการอยู่ในบรรทัดเดียว มันจัดโครงสร้างทั้งหมดตามค่าของมัน นี่คือตัวอย่างสำหรับalign-content: space-around;:

และนี่คือวิธีที่align-content: space-around;มีalign-items:centerรูปลักษณ์:

หมายเหตุกล่องที่ 3 และกล่องอื่น ๆ ทั้งหมดในบรรทัดแรกเปลี่ยนเป็นกึ่งกลางแนวตั้งในบรรทัดนั้น

นี่คือลิงค์ codepen ที่จะเล่นด้วย:

http://codepen.io/asim-coder/pen/MKQWbb

http://codepen.io/asim-coder/pen/WrMNWR

นี่คือปากกาสุดเจ๋งที่แสดงและให้คุณเล่นได้เกือบทุกอย่างใน flexbox

ฉันพบตัวอย่างhttp://flexboxfroggy.com/มีประโยชน์มาก

จะใช้เวลา 10-20 นาทีและที่ระดับ 21 คุณจะพบคำตอบสำหรับคำถามของคุณ มันกล่าวถึง:

align-contentกำหนดระยะห่างระหว่างบรรทัดในขณะที่align-items กำหนดวิธีการจัดเรียงรายการทั้งหมดภายในคอนเทนเนอร์ เมื่อมีเพียงหนึ่งบรรทัดการจัดตำแหน่งเนื้อหาจะไม่มีผลใด ๆ

อย่างแรกalign-itemsคือสำหรับรายการในแถวเดียว ดังนั้นสำหรับแถวเดียวขององค์ประกอบบนแกนหลัก , align-itemsจะจัดรายการเหล่านี้ตามลำดับของแต่ละอื่น ๆ และมันจะเริ่มต้นด้วยมุมมองใหม่จากแถวถัดไป

ตอนนี้align-contentไม่ยุ่งเกี่ยวกับรายการในแถว แต่กับแถวของตัวเอง ดังนั้นalign-contentจะพยายามจัดแนวแถวให้สัมพันธ์กันและโค้งงอคอนเทนเนอร์

ตรวจสอบซอนี้: https://jsfiddle.net/htym5zkn/8/

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

1. คอนเทนเนอร์แบบยืดหยุ่นนั้นมีข้อจำกัดความสูง (เช่นmin-height: 60rem) และอาจสูงเกินไปสำหรับเนื้อหา
2. รายการเด็กที่อยู่ในภาชนะบรรจุมีความสูงไม่เท่ากัน

เงื่อนไข 1ช่วยให้ฉันเข้าใจความcontentหมายของคอนเทนเนอร์แม่ เมื่อเนื้อหานั้นให้ล้างออกด้วยภาชนะที่เราจะไม่สามารถที่จะเห็นผลการวางตำแหน่งใด ๆ align-contentที่มาจาก เมื่อเรามีพื้นที่พิเศษตามแนวแกนไขว้เราจะเริ่มเห็นผลของมัน: มันจัดเรียงเนื้อหาสัมพันธ์กับขอบเขตของคอนเทนเนอร์หลัก

เงื่อนไขที่ 2ช่วยให้ฉันเห็นภาพผลกระทบของalign-itemsมันจัดเรียงรายการที่สัมพันธ์กัน

นี่คือตัวอย่างรหัส วัตถุดิบมาจากการสอน CSS Grid Wes ของ Wes Bos (21. Flexbox กับ CSS Grid)

• ตัวอย่าง HTML:

  <div class="flex-container">
    <div class="item">Short</div>
    <div class="item">Longerrrrrrrrrrrrrr</div>
    <div class="item">💩</div>
    <div class="item" id="tall">This is Many Words</div>
    <div class="item">Lorem, ipsum.</div>
    <div class="item">10</div>
    <div class="item">Snickers</div>
    <div class="item">Wes Is Cool</div>
    <div class="item">Short</div>
  </div>

• ตัวอย่าง CSS:

.flex-container {
  display: flex;
  /*dictates a min-height*/
  min-height: 60rem;
  flex-flow: row wrap;
  border: 5px solid white;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
 }

#tall {
  /*intentionally made tall*/
  min-height: 30rem;
}

.item {
  margin: 10px;
  max-height: 10rem;
}

ตัวอย่างที่ 1 : ลอง จำกัด viewport ให้แคบลงเพื่อให้เนื้อหาถูกลบออกด้วยคอนเทนเนอร์ นี่คือเมื่อalign-content: flex-start;ไม่มีผลกระทบเนื่องจากบล็อกเนื้อหาทั้งหมดแน่นอยู่ในคอนเทนเนอร์ (ไม่มีที่ว่างสำหรับจัดตำแหน่งใหม่!)

นอกจากนี้ให้สังเกตแถวที่ 2 - ดูว่ารายการอยู่ในแนวเดียวกันอย่างไร

ตัวอย่างที่ 2 : เมื่อเราขยายวิวพอร์ตเราไม่มีเนื้อหาเพียงพอที่จะเติมทั้งคอนเทนเนอร์ ตอนนี้เราเริ่มที่จะเห็นผลกระทบของ - align-content: flex-start;มันจัดเนื้อหาที่สัมพันธ์กับขอบด้านบนของภาชนะ

ตัวอย่างเหล่านี้ยึดตาม flexbox แต่หลักการเดียวกันนี้ใช้กับกริด CSS ได้ หวังว่าจะช่วย :)

ดีฉันได้ตรวจสอบพวกเขาในเบราว์เซอร์ของฉัน

align-contentสามารถเปลี่ยนความสูงของเส้นสำหรับทิศทางแถวหรือความกว้างของคอลัมน์เมื่อค่าของมันคือการยืดหรือเพิ่มพื้นที่ว่างระหว่างหรือรอบ ๆ เส้นสำหรับspace-between, space-around, ,flex-startflex-end values

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

อย่างไรก็ตามหากมีการห่อคุณมีหลายบรรทัดและรายการภายในแต่ละบรรทัด และหากรายการทั้งหมดของแต่ละบรรทัดมีความสูงเท่ากัน (สำหรับทิศทางแถว) ความสูงของบรรทัดนั้นจะเท่ากับความสูงของรายการเหล่านั้นและคุณไม่เห็นผลใด ๆ โดยการเปลี่ยนalign-itemsค่า

ดังนั้นหากคุณต้องการส่งผลกระทบต่อรายการโดยalign-itemsเมื่อรายการของคุณถูกห่อและมีความสูงเดียวกัน (สำหรับทิศทางแถว) ก่อนอื่นคุณต้องใช้align-contentกับค่าการยืดเพื่อขยายพื้นที่เส้น

จัดเนื้อหา

align-contentควบคุมแกนไขว้ (เช่นทิศทางแนวตั้งถ้าflex-directionเป็นrow, และในแนวนอนถ้าflex-directionมีcolumn) การวางตำแหน่งของหลายบรรทัดที่สัมพันธ์กัน

(คิดว่าบรรทัดของย่อหน้าถูกกระจายในแนวตั้งซ้อนไปทางด้านบนวางซ้อนกันไปที่ด้านล่างนี่อยู่ภายใต้flex-directionกระบวนทัศน์ของแถว)

จัดรายการที่

align-items ควบคุมแกนไขว้ของแต่ละเส้นขององค์ประกอบงอ

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

สิ่งที่ฉันได้เรียนรู้จากทุกคำตอบและการเยี่ยมชมบล็อกคือ

แกนไขว้และแกนหลักคืออะไร

• แกนหลักคือแถวแนวนอนและแกนไขว้เป็นคอลัมน์แนวตั้ง - สำหรับ flex-direction: row
• แกนหลักคือคอลัมน์แนวตั้งและแกนไขว้เป็นแถวแนวนอน - สำหรับ flex-direction: column

ตอนนี้จัดเรียงเนื้อหาและจัดเรียงรายการ

align-content ใช้สำหรับแถวใช้งานได้หากคอนเทนเนอร์มี (มากกว่าหนึ่งแถว) คุณสมบัติของ align-content

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

align-itemsสำหรับรายการในแถว Properties ของ align-items

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

สำหรับการอ้างอิงเพิ่มเติมเพื่อดิ้น

ความแตกต่างที่สำคัญคือเมื่อความสูงขององค์ประกอบไม่เหมือนกัน! จากนั้นคุณสามารถดูว่าแถวเหล่านั้นอยู่ตรงกลาง \ end \ start ได้อย่างไร

ตามสิ่งที่ฉันเข้าใจจากที่นี่ :

เมื่อคุณใช้ align-item หรือ justify-item คุณกำลังปรับ "เนื้อหาภายในรายการกริดตามแกนคอลัมน์หรือแกนแถวตามลำดับ

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