เค้าโครงกล่องที่ยืดหยุ่น
กับการถือกำเนิดของCSS กล่องที่มีความยืดหยุ่นมากของฝันร้ายนักออกแบบเว็บ1ได้รับการแก้ไข หนึ่งในผู้ที่แฮ็คมากที่สุดคือการจัดเรียงในแนวตั้ง ตอนนี้มันเป็นไปได้ในความสูงที่ไม่รู้จัก
"การแฮ็กโครงร่างสองทศวรรษกำลังจะมาถึงจุดจบบางทีอาจไม่ใช่พรุ่งนี้ แต่ในไม่ช้าและตลอดชีวิตที่เหลือของเรา"
- CSS Legendary Eric MeyerในงานW3Conf 2013
กล่องที่ยืดหยุ่น (หรือเรียกสั้น ๆ ว่า Flexbox) เป็นระบบโครงร่างใหม่ที่ออกแบบมาโดยเฉพาะเพื่อวัตถุประสงค์ด้านการจัดวาง เปครัฐ :
เลย์เอาต์แบบยืดหยุ่นคล้ายกับบล็อกเลย์เอาต์ มันขาดคุณสมบัติข้อความหรือเอกสารเป็นศูนย์กลางที่ซับซ้อนมากขึ้นที่สามารถใช้ในรูปแบบบล็อกเช่นลอยและคอลัมน์ ในทางกลับกันจะได้รับเครื่องมือที่ง่ายและมีประสิทธิภาพสำหรับการกระจายพื้นที่และจัดเรียงเนื้อหาในแบบที่เว็บแอพพลิเคชั่นและเว็บเพจที่ซับซ้อนมักต้องการ
ในกรณีนี้มีประโยชน์อย่างไร เรามาดูกันดีกว่า
คอลัมน์จัดแนวตั้ง
ใช้ Twitter Bootstrap เรามี.rows มีบางส่วน.col-*ของ สิ่งที่เราต้องทำคือการแสดง.row2ที่ต้องการเป็นกล่องคอนเทนเนอร์แบบยืดหยุ่นแล้วจัดเรียงรายการดิ้นของมัน(คอลัมน์) ในแนวตั้งตามalign-itemsคุณสมบัติ
ตัวอย่างที่นี่ (โปรดอ่านความคิดเห็นด้วยความระมัดระวัง)
<div class="container">
<div class="row vertical-align"> <!--
^-- Additional class -->
<div class="col-xs-6"> ... </div>
<div class="col-xs-6"> ... </div>
</div>
</div>
.vertical-align {
display: flex;
align-items: center;
}
ผลลัพธ์
พื้นที่สีแสดงช่องว่างภายในของคอลัมน์
ชี้แจงเกี่ยวกับ align-items: center
8.3 การจัดแนวแกน: align-itemsคุณสมบัติ
รายการ Flexสามารถจัดตำแหน่งในแกนไขว้ของบรรทัดปัจจุบันของคอนเทนเนอร์ flex คล้ายกับjustify-contentแต่ในทิศทางตั้งฉาก align-itemsกำหนดจัดตำแหน่งเริ่มต้นสำหรับรายการทั้งหมดที่ภาชนะดิ้นรวมทั้งที่ไม่ระบุชื่อรายการดิ้น
align-items: center;
ตามค่ากลางกล่องเฟล็กซ์ของสินค้ายืดหยุ่นจะอยู่กึ่งกลางในแกนไขว้ภายในบรรทัด
การแจ้งเตือนครั้งใหญ่
หมายเหตุสำคัญ # 1: Bootstrap Twitter ไม่ได้ระบุwidthคอลัมน์ในอุปกรณ์ขนาดเล็กพิเศษเว้นแต่คุณจะให้หนึ่งใน.col-xs-#คลาสของคอลัมน์
ดังนั้นในการสาธิตนี้ฉันใช้.col-xs-*คลาสเพื่อให้คอลัมน์แสดงอย่างถูกต้องในโหมดมือถือเพราะมันระบุwidthคอลัมน์อย่างชัดเจน
แต่คุณสามารถปิดเค้าโครง Flexbox ได้ง่ายๆโดยเปลี่ยนdisplay: flex;เป็นdisplay: block;ขนาดหน้าจอเฉพาะ ตัวอย่างเช่น
/* Extra small devices (767px and down) */
@media (max-width: 767px) {
.row.vertical-align {
display: block; /* Turn off the flexible box layout */
}
}
หรือคุณอาจจะระบุ.vertical-align เพียงในขนาดหน้าจอที่เฉพาะเจาะจงเช่นดังนั้น:
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.row.vertical-align {
display: flex;
align-items: center;
}
}
ในกรณีที่ผมไปกับ@KevinNelson 's วิธี
หมายเหตุสำคัญ # 2:คำนำหน้าผู้ขายละเว้นเนื่องจากความกะทัดรัด มีการเปลี่ยนแปลงไวยากรณ์ Flexbox ในช่วงเวลานั้น ไวยากรณ์ที่เขียนขึ้นใหม่จะไม่ทำงานบนเว็บเบราว์เซอร์เวอร์ชันเก่า (แต่ไม่เก่าเช่น Internet Explorer 9! Flexbox ได้รับการสนับสนุนบน Internet Explorer 10 และใหม่กว่า)
ซึ่งหมายความว่าคุณควรใช้คุณสมบัตินำหน้าผู้ขายเช่นdisplay: -webkit-boxในโหมดการผลิต
หากคุณคลิกที่"Toggle Compiled View"ในการสาธิตคุณจะเห็นการประกาศ CSS รุ่นนำหน้า (ขอบคุณAutoprefixer )
คอลัมน์ความสูงเต็มพร้อมเนื้อหาแนวตั้งแนวตั้ง
ดังที่คุณเห็นในการสาธิตก่อนหน้าคอลัมน์ (รายการเฟล็กซ์) ไม่สูงเท่ากับคอนเทนเนอร์ (กล่องเฟล็กซ์คอนเทนเนอร์อีกต่อไป).rowองค์ประกอบ)
นี่คือเนื่องจากการใช้centerค่าสำหรับalign-itemsคุณสมบัติ ค่าเริ่มต้นคือstretchเพื่อให้รายการสามารถเติมเต็มความสูงทั้งหมดขององค์ประกอบหลัก
ในการแก้ไขนั้นคุณสามารถเพิ่มลงdisplay: flex;ในคอลัมน์ได้เช่นกัน:
ตัวอย่างที่นี่ (อีกครั้งโปรดคำนึงถึงความคิดเห็น)
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center; /* Align the flex-items vertically */
justify-content: center; /* Optional, to align inner flex-items
horizontally within the column */
}
ผลลัพธ์
พื้นที่สีแสดงช่องว่างภายในของคอลัมน์
สุดท้ายขอให้สังเกตว่าการสาธิตและตัวอย่างโค้ดที่นี่มีจุดประสงค์เพื่อให้คุณมีแนวคิดที่แตกต่างเพื่อให้แนวทางที่ทันสมัยเพื่อให้บรรลุเป้าหมาย โปรดทราบส่วน "การแจ้งเตือนครั้งใหญ่ " หากคุณจะใช้วิธีการนี้ในเว็บไซต์หรือแอปพลิเคชันในโลกแห่งความเป็นจริง
สำหรับการอ่านเพิ่มเติมรวมถึงการสนับสนุนเบราว์เซอร์ทรัพยากรเหล่านี้จะเป็นประโยชน์:
1. จัดแนวตั้งภาพภายใน div มีความสูงตอบสนองได้ดี
2. .rowจะดีกว่าที่จะใช้ชั้นเพิ่มเติมเพื่อไม่ให้เปลี่ยนค่าเริ่มต้นของเงินทุน
divไม่มีภายในข้อความบางอย่างเช่นนี้jsfiddle.net/corinem/Aj9H9แต่ในตัวอย่างนี้ผมไม่ได้ใช้บูต