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

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

flex-basedช่วยให้คุณสามารถระบุขนาดเริ่มต้น / เริ่มต้นขององค์ประกอบก่อนที่จะคำนวณสิ่งอื่นใด อาจเป็นเปอร์เซ็นต์หรือค่าสัมบูรณ์

... ซึ่งในตัวมันเองไม่ได้พูดอะไรมากเกี่ยวกับพฤติกรรมขององค์ประกอบที่มีการตั้งค่าแบบยืดหยุ่น ด้วยความรู้ปัจจุบันเกี่ยวกับ flexbox ของฉันฉันไม่เห็นสาเหตุที่ไม่สามารถอธิบายความกว้างได้

ฉันต้องการทราบว่าflex-baseแตกต่างจากความกว้างในทางปฏิบัติอย่างไร

• ถ้าฉันเปลี่ยนความกว้างด้วยความยืดหยุ่น (และในทางกลับกัน) สิ่งที่จะเปลี่ยนสายตา?
• จะเกิดอะไรขึ้นถ้าฉันตั้งค่าทั้งสองเป็นค่าอื่น จะเกิดอะไรขึ้นหากพวกเขามีค่าเท่ากัน?
• มีกรณีพิเศษบางอย่างที่ใช้ความกว้างหรือความยืดหยุ่นพื้นฐานจะมีความแตกต่างอย่างมีนัยสำคัญในการใช้อีกหรือไม่
• วิธีทำความกว้างและดิ้นพื้นฐานแตกต่างกันเมื่อใช้ร่วมกับรูปแบบ flexbox อื่น ๆ เช่นดิ้นห่อ , ดิ้นเติบโตและดิ้นหด ?
• ความแตกต่างที่สำคัญอื่น ๆ

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

พิจารณา flex-direction

สิ่งแรกที่มาถึงใจเมื่ออ่านคำถามของคุณคือการที่ไม่เคยนำไปใช้กับflex-basiswidth

เมื่อflex-directionเป็นrow, flex-basisการควบคุมความกว้าง

แต่เมื่อflex-directionเป็นcolumn, flex-basisการควบคุมความสูง

ความแตกต่างที่สำคัญ

นี่คือความแตกต่างที่สำคัญระหว่างflex-basisและwidth/ height:

• flex-basisใช้กับไอเท็ม flex เท่านั้น ภาชนะ Flex (ที่ไม่ได้นอกจากนี้ยังมีรายการ flex) จะไม่สนใจflex-basisแต่สามารถใช้และwidthheight

• flex-basisทำงานบนแกนหลักเท่านั้น ตัวอย่างเช่นถ้าคุณอยู่ในflex-direction: columnที่widthสถานที่ให้บริการจะต้องใช้สำหรับการปรับขนาดรายการแนวนอนดิ้น

• flex-basisจะไม่มีผลกับไอเท็มเฟล็กซ์ตำแหน่งที่แน่นอน widthและheightคุณสมบัติจะมีความจำเป็น อย่างตำแหน่งรายการดิ้นไม่ได้มีส่วนร่วมในรูปแบบเฟล็กซ์

• โดยใช้flexสถานที่ให้บริการสามคุณสมบัติ - flex-grow, flex-shrinkและflex-basis- สามารถรวมกันได้อย่างเรียบร้อยเป็นหนึ่งในการประกาศ ใช้widthกฎเดียวกันจะต้องมีรหัสหลายบรรทัด

พฤติกรรมเบราว์เซอร์

ในแง่ของวิธีที่พวกเขาจะแสดงผลควรจะมีความแตกต่างระหว่างflex-basisและwidthเว้นแต่flex-basisเป็นหรือautocontent

จากสเป็ค:

7.2.3 flex-basisคุณสมบัติ

สำหรับค่าอื่น ๆ ทั้งหมดกว่าautoและcontent, flex-basisได้รับการแก้ไขแบบเดียวกับwidthในโหมดการเขียนในแนวนอน

แต่ผลกระทบของautoหรือcontentอาจจะน้อยหรือไม่มีอะไรเลย เพิ่มเติมจากสเป็ค:

auto

เมื่อระบุไว้ในรายการเฟล็กซ์ที่คำหลักดึงค่าของหลักคุณสมบัติขนาดเป็นที่ใช้auto flex-basisหากค่าที่เป็นตัวเองแล้วค่าที่ใช้คือautocontent

content

ระบุขนาดอัตโนมัติขึ้นอยู่กับเนื้อหาของรายการที่ยืดหยุ่น

หมายเหตุ: ค่านี้ไม่ปรากฏในรุ่นที่วางจำหน่ายครั้งแรกของ Flexible Box Layout ดังนั้นการใช้งานรุ่นเก่าบางอย่างจะไม่สนับสนุน ผลเทียบเท่าสามารถทำได้โดยการใช้autoร่วมกันที่มีขนาดหลัก ( widthหรือheight) autoของ

ดังนั้นตามข้อมูลจำเพาะflex-basisและwidthแก้ไขเหมือนกันเว้นแต่flex-basisเป็นหรือauto contentในกรณีเช่นนี้flex-basisอาจใช้ความกว้างของเนื้อหา (ซึ่งน่าจะเป็นwidthคุณสมบัติที่ใช้เช่นกัน)

flex-shrinkปัจจัย

สิ่งสำคัญคือต้องจดจำการตั้งค่าเริ่มต้นของ flex container การตั้งค่าบางอย่างเหล่านี้รวมถึง:

• flex-direction: row - รายการที่ยืดหยุ่นจะจัดเรียงในแนวนอน
• justify-content: flex-start - ไอเท็มแบบเฟล็กจะเรียงซ้อนกันที่จุดเริ่มต้นของบรรทัดบนแกนหลัก
• align-items: stretch - รายการที่ยืดหยุ่นจะขยายเพื่อครอบคลุมขนาดข้ามของคอนเทนเนอร์
• flex-wrap: nowrap - รายการที่ยืดหยุ่นจะถูกบังคับให้อยู่ในบรรทัดเดียว
• flex-shrink: 1 - ไอเท็มเฟล็กซ์ได้รับอนุญาตให้หด

บันทึกการตั้งค่าล่าสุด

เนื่องจากรายการดิ้นได้รับอนุญาตให้หดตัวตามค่าเริ่มต้น (ซึ่งป้องกันไม่ให้ล้นภาชนะ) ที่ระบุflex-basis/ width/ heightอาจถูกแทนที่

ตัวอย่างเช่น flex-basis: 100pxหรือwidth: 100pxประกอบกับflex-shrink: 1จะไม่จำเป็นต้องเป็น 100px

ในการแสดงความกว้างที่ระบุ - และคงไว้ - คุณจะต้องปิดการหดตัว:

div {
   width: 100px;
   flex-shrink: 0;
}  

หรือ

div {
  flex-basis: 100px;
  flex-shrink: 0;
}

หรือตามคำแนะนำของสเป็ค:

flex: 0 0 100px;    /* don't grow, don't shrink, stay fixed at 100px */

7.2 ส่วนประกอบของความยืดหยุ่น

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

ข้อบกพร่องของเบราว์เซอร์

เบราว์เซอร์บางตัวมีปัญหาในการปรับขนาดรายการ flex ในคอนเทนเนอร์แบบซ้อนที่ซ้อนกัน

flex-basisละเว้นในคอนเทนเนอร์ flex แบบซ้อน widthโรงงาน

เมื่อใช้flex-basisคอนเทนเนอร์จะไม่สนใจขนาดของลูกและเด็ก ๆ จะล้นภาชนะ แต่ด้วยwidthคุณสมบัติภาชนะที่เคารพขนาดของเด็กและขยายตาม

อ้างอิง:

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

ตัวอย่าง:

• https://jsfiddle.net/t419zhra/ (ที่มา: @Dremora )
• https://codepen.io/anon/pen/NVxaoy (แหล่ง@Daniel )
• https://jsfiddle.net/voc9grx6/ (ที่มา: Chromium Bugs )
• https://jsfiddle.net/qjpat9zk/ (ที่มา: Chromium Bugs )

งอรายการที่ใช้flex-basisและคอนเทนเนอร์ white-space: nowrapล้น โรงงานinline-flexwidth

ดูเหมือนว่าชุดเฟล็กซ์คอนเทนเนอร์จะinline-flexไม่รู้จักflex-basisกับเด็กเมื่อแสดงผล sibling ด้วยwhite-space: nowrap(แม้ว่ามันอาจเป็นเพียงรายการที่มีความกว้างไม่ได้กำหนด) คอนเทนเนอร์ไม่ขยายเพื่อรองรับรายการ

แต่เมื่อwidthคุณสมบัติถูกนำมาใช้แทนflex-basisภาชนะที่เคารพขนาดของเด็กและขยายตาม นี่ไม่ใช่ปัญหาใน IE11 และ Edge

อ้างอิง:

• ความกว้างของภาชนะบรรจุแบบอินไลน์ไม่เพิ่มขึ้น
• Inline flex container (จอแสดงผล: inline-flex) กำลังขยายเต็มความกว้างของพาเรนต์คอนเทนเนอร์

ตัวอย่าง:

• https://jsfiddle.net/p18h0jxt/1/ (จากโพสต์แรกด้านบน)

flex-basis(และflex-grow) ไม่ทำงานกับองค์ประกอบตาราง

อ้างอิง:

• เหตุใด flex-box จึงทำงานกับ div แต่ไม่ใช่ตาราง
• เหตุใดจึงไม่ขยายแบบยืดหยุ่น: 1 ใช้งานได้กับตารางใน Safari (และขอบ)

flex-basisล้มเหลวใน Chrome และ Firefox เมื่อคอนเทนเนอร์ grandparent เป็นองค์ประกอบย่อให้พอดี การตั้งค่าทำงานได้ดีใน Edge

• ตำแหน่งที่อยู่ในตำแหน่งแน่นอนไม่ขยายความกว้างเพื่อให้พอดีกับเนื้อหาของ flexbox

เช่นเดียวกับในตัวอย่างที่นำเสนอในลิงค์ด้านบนซึ่งเกี่ยวข้องกับposition: absoluteการใช้floatและinline-blockจะทำให้การแสดงผลมีข้อบกพร่องเหมือนกัน ( สาธิต jsfiddle )

ข้อบกพร่องที่มีผลต่อ IE 10 และ 11:

• flexการประกาศชวเลขและflex-basisค่าที่ไม่มีหน่วยจะถูกละเว้น
• flex-basis ไม่ได้บัญชี box-sizing: border-box
• flex-basis ไม่รองรับ calc()
• ความสำคัญจะถูกละเว้นflex-basisเมื่อใช้flexชวเลข

นอกเหนือจากบทสรุปที่ยอดเยี่ยมของ Michael_B มันก็คุ้มค่าที่จะทำสิ่งนี้ซ้ำ:

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

ส่วนสำคัญที่นี่คือ การเริ่มต้น

ด้วยตัวเองสิ่งนี้จะแก้ไขความกว้าง / ความสูง จนกว่าคุณสมบัติการขยาย / หดแบบยืดหยุ่นอื่น ๆ จะเข้าสู่การเล่น

ดังนั้น. เด็กด้วย

.child {
 flex-basis:25%;
 flex-grow:1;
}

จะมีความกว้าง 25% ในตอนแรก แต่จากนั้นจะขยายให้มากที่สุดเท่าที่จะทำได้จนกว่าองค์ประกอบอื่น ๆ จะได้รับการพิจารณาหากไม่มีสิ่งใด .. จะมีความกว้าง 100% / สูง

การสาธิตอย่างรวดเร็ว:

.flex {
  width: 80%;
  margin: 1em auto;
  height: 25px;
  display: flex;
  background: rebeccapurple;
}
.child {
  flex-basis: auto;
  /* default */
  background: plum;
}
.value {
  flex-basis: 25%;
}
.grow {
  flex-grow: 1;
}

<div class="flex">
  <div class="child auto">Some Content</div>
</div>
<div class="flex">
  <div class="child value">Some Content</div>
</div>
<div class="flex">
  <div class="child grow">Some Content</div>
</div>

การทดลองกับflex-grow, flex-shrinkและflex-basis (หรือจดชวเลขflex :fg fs fb) ... สามารถนำไปสู่ผลที่น่าสนใจ

อาจเป็นจุดสำคัญที่สุดในการเพิ่ม:

เกิดอะไรขึ้นถ้าเบราว์เซอร์ไม่สนับสนุนflex? ในกรณีเช่นนี้width/heightยึดครองและใช้ค่าของพวกเขา

มันเป็นความคิดที่ดีมาก - เกือบจำเป็น - การกำหนดองค์ประกอบแม้ว่าคุณแล้วมีค่าที่แตกต่างกันอย่างสมบูรณ์สำหรับwidth/height flex-basisอย่าลืมทดสอบด้วยการปิดการใช้งานdisplay:flexและดูสิ่งที่คุณได้รับ