Flexbox vs Twitter Bootstrap (หรือเฟรมเวิร์กที่คล้ายกัน) [ปิด]

161

ปิด คำถามนี้เป็นคำถามความคิดเห็นตาม ไม่ยอมรับคำตอบในขณะนี้

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

ปิดให้บริการใน5 ปีที่ผ่านมา

ฉันได้ค้นพบFlexboxเมื่อเร็ว ๆ นี้เมื่อฉันกำลังมองหาวิธีแก้ปัญหาเพื่อให้ div สูงเหมือนกันขึ้นอยู่กับระดับสูงสุด

ฉันได้อ่านหน้าต่อไปนี้บน CSS-tricks.com และเชื่อฉันว่าflexboxเป็นโมดูลที่ทรงพลังมากในการเรียนรู้และใช้งาน อย่างไรก็ตามมันทำให้ฉันคิดถึงความจริงที่ว่า Twitter Bootstrap (และเฟรมเวิร์กที่คล้ายกัน) เสนอฟังก์ชั่นแบบเดียวกัน (+ แน่นอนมากขึ้นเป็นพิเศษ) ด้วยระบบกริด

ตอนนี้คำถามคืออะไรข้อดีและข้อเสียของflexboxคืออะไร? มีบางอย่างที่เราไม่สามารถทำได้กับ Flexbox ที่เราสามารถทำกับเฟรมเวิร์กอย่าง Bootstrap (แน่นอนว่าเป็นการพูดถึงระบบกริด) ตัวเลือกใดที่เร็วกว่าเมื่อติดตั้งบนเว็บไซต์

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

มีเหตุผลใดบ้างที่จะเลือกflexbox"ระบบกริด" บนกรอบของ?

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

ฉันใช้ Flexbox กับ Bootstrap

— Aibrean

ลองดูที่Zurb ของมูลนิธิปพลิเคชัน มันถูกสร้างขึ้นอย่างสมบูรณ์บนระบบ Flexbox Grid

— Salem Ouerdani

สิ่งนี้อาจมีประโยชน์ Bootstrap ตอนนี้เปลี่ยนจากการลอยตัวเป็น flex

— Faizan Akram Dar

Bootstrap 4 ตอนนี้เป็น flexbox ตามค่าเริ่มต้น! Flexbox เป็นเครื่องมือโครงร่างที่ทรงพลังอย่างยิ่งมอบความยืดหยุ่นและการควบคุมระบบกริดและส่วนประกอบหลักที่ไม่มีใครเทียบ มาพร้อมกับค่าใช้จ่ายในการทิ้งการสนับสนุน IE9 แต่นำการปรับปรุงที่สำคัญไปยังเค้าโครงส่วนประกอบการจัดตำแหน่งและการปรับขนาด

— Nermien Barakat

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

— ดารินทร์คาร์ดิน

คำตอบ:

107

ด้วยเหตุผลสองประการ flexbox นั้นดีกว่า bootstrap:

Bootstrap ใช้โฟลตเพื่อสร้างระบบกริดซึ่งหลายคนอาจบอกว่าไม่ได้มีไว้สำหรับเว็บที่ซึ่ง flex-box ทำตรงข้ามโดยคงความยืดหยุ่นตามขนาดและเนื้อหาของรายการ ความแตกต่างเช่นเดียวกับการใช้พิกเซลเทียบกับ em / rem หรือเหมือนกับการควบคุม div ของคุณโดยใช้ระยะขอบและระยะห่างและไม่เคยกำหนดขนาดที่กำหนดไว้ล่วงหน้า
Bootstrap เนื่องจากมันใช้การลอยต้องการ clearfix หลังจากแต่ละแถวหรือคุณจะได้ div ที่ไม่ตรงตามความสูงที่แตกต่างกัน กล่องเฟล็กซ์ไม่ได้ทำอย่างนั้น แต่จะตรวจสอบ div ที่สูงที่สุดในภาชนะแทน

เหตุผลเดียวที่ฉันจะไปกับ bootstrap บน flex-box คือการขาดการสนับสนุนเบราว์เซอร์ (IE ส่วนใหญ่) (ตายแล้ว) และบางครั้งคุณอาจมีพฤติกรรมที่แตกต่างจาก Chrome และ Safari แม้ว่าทั้งคู่จะใช้เครื่องมือ webkit เดียวกัน

แก้ไข:

BTW หากปัญหาเดียวที่คุณเผชิญคือคอลัมน์ความสูงเท่ากันมีวิธีแก้ปัญหาไม่กี่ข้อสำหรับ:

คุณสามารถใช้display: tableกับผู้ปกครองdisplay: table-cell;บนเด็ก ดูวิธีรับความสูงเท่ากันบนหน้าจอ: ตารางเซลล์
คุณสามารถใช้การกำหนดตำแหน่งแบบสัมบูรณ์ในแต่ละ div:
position: absolute; top: 0; bottom: 0;
นอกจากนี้ยังมีโซลูชัน jquery / JS และอีกโซลูชันหนึ่งที่ฉันจำไม่ได้ในขณะนี้ว่าฉันจะลองเพิ่มในภายหลัง

แก้ไข 2:

นอกจากนี้ให้ตรวจสอบhttp://chriswrightdesign.com/experiments/flexbox-adventures/ & https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-propertiesว่าเฟล็กซ์บ็อกซ์ทำงานอย่างไร

แก้ไข 3: https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

แก้ไข 4: https://caniuse.com/#feat=flexbox

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

ขอบคุณสำหรับความคิดเห็นของคุณ ฉันไม่พบคำอธิบายใด ๆ เกี่ยวกับสิ่งที่ "ดีกว่า" ของทั้งสองดังนั้นฉันหวังว่าคำถามของฉัน (และคำตอบของคุณและในอนาคต) จะช่วยให้ผู้คนตัดสินใจ โชคดีที่ IE 11 ได้รับส่วนแบ่งการตลาดที่ใหญ่กว่าตอนนี้เมื่อเทียบกับสามเวอร์ชันก่อนหน้านี้รวมกัน (ซึ่งรองรับ IE10 flexbox) ดังนั้นในสายตาของฉันมันปลอดภัยที่จะใช้ คุณมีความคิดเห็นอย่างไรกับการใช้กรอบการทำงานร่วมกันและflexbox? ไม่สนใจระบบกริดของเฟรมเวิร์กขณะใช้งานแน่นอน

— Rvervuurt

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

— ckuijjer

จริง ๆ แล้วคุณสามารถใช้ทั้งสองอย่างถ้าคุณต้องการซึ่งฉันเชื่อว่าเป็นตัวเลือกที่ดีที่สุดเพราะคุณไม่จำเป็นต้องห่อหุ้มใจรอบ ๆ สิ่งที่คุณคุ้นเคยอยู่แล้วในบางเวลา (เช่นสำหรับคนที่ไม่รู้อะไรเลย BS) แต่สำหรับฉันจุดขายของ flex-box คือมันมีความยืดหยุ่นเท่ากันที่คุณสามารถรับได้โดยใช้ JS แต่ไม่ต้องเขียนโค้ดบรรทัดเดียว

— ctf0

ข้อมูลความเข้ากันได้แบบเต็ม: caniuse.com/#feat=flexboxโปรดทราบว่า Android รุ่นเก่าก็มีปัญหาเช่นกัน

— cvrebert

เขื่อนและฉันคิดว่าเราเกือบจะใช้มันดูเหมือนว่าจะต้องใช้เวลาอีกหนึ่งปีหรือบางสิ่งบางอย่างที่เราเห็นในป่า b4, ขอบคุณสำหรับหัวขึ้น

— ctf0

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

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

นั่นเป็นเหตุผลว่าทำไมคุณถึงต้องใช้กริดแบบลอยสำหรับ div ที่พิมพ์ได้ร่วมกับคลาสการพิมพ์ bootstrap

— ctf0

ฉันเกรงว่าคุณจะพลาดบทความอื่นเกี่ยวกับเทคนิค CSS :

หมายเหตุ: เค้าโครง Flexbox เหมาะสมที่สุดกับส่วนประกอบของแอปพลิเคชันและเค้าโครงขนาดเล็กในขณะที่เค้าโครงกริดมีไว้สำหรับเค้าโครงขนาดใหญ่

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

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

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

— getsetbro

ต้องบอกว่าฉันพลาดไป! :) ขอบคุณสำหรับการแก้ไข

— Kout

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

— Ahmad Farouk