การเขียนโปรแกรม flexbox

5

Flexbox และ Internet Explorer 11 (display: flex in <html>?)

ฉันวางแผนที่จะย้ายออกจากรูปแบบ "floaty" และใช้ CSS flexbox สำหรับโครงการในอนาคต ฉันรู้สึกยินดีที่เห็นว่าเบราว์เซอร์หลัก ๆ ทั้งหมดในเวอร์ชันปัจจุบันดูเหมือนจะรองรับ flexbox (ไม่ทางใดก็ทางหนึ่ง) ฉันไปที่"แก้ไขโดย Flexbox"เพื่อดูตัวอย่างบางส่วน อย่างไรก็ตาม "Sticky ท้าย" ตัวอย่างที่ดูเหมือนจะไม่ทำงานใน Internet Explorer 11 ที่ผมเล่นรอบ bit และได้ไปทำงานโดยการเพิ่มdisplay:flexไป<html>และwidth:100%ไป<body> คำถามแรกของฉันคือใครช่วยอธิบายตรรกะนั้นให้ฉันฟังได้ไหม ฉันแค่เล่นตัวไปมาและมันได้ผล แต่ฉันไม่ค่อยเข้าใจว่าทำไมมันถึงได้ผลแบบนั้น ... จากนั้นจะมีตัวอย่าง "Media Object" ที่ใช้งานได้ในทุกเบราว์เซอร์ยกเว้น - คุณเดาได้ - Internet Explorer ฉันเล่นกับมันเหมือนกัน แต่ไม่ประสบความสำเร็จใด ๆ คำถามที่สองของฉันคือ: มีความเป็นไปได้ที่ "สะอาด" ที่จะทำให้ตัวอย่าง "Media Object" ทำงานใน Internet Explorer ได้หรือไม่

117 html css flexbox cross-browser

10

Flexbox ไม่อยู่ตรงกลางในแนวตั้งใน IE

ฉันมีหน้าเว็บง่ายๆที่มีเนื้อหา Lipsum ซึ่งอยู่กึ่งกลางของหน้า หน้านี้ทำงานได้ดีใน Chrome และ Firefox หากฉันลดขนาดของหน้าต่างเนื้อหาจะเต็มหน้าต่างจนกว่าจะไม่สามารถเพิ่มแถบเลื่อนและเติมเนื้อหาออกจากหน้าจอไปทางด้านล่าง อย่างไรก็ตามเพจไม่ได้อยู่กึ่งกลางใน IE11 ฉันสามารถทำให้หน้าอยู่ตรงกลางใน IE ได้โดยการงอร่างกาย แต่ถ้าทำเช่นนั้นเนื้อหาจะเริ่มออกจากหน้าจอไปทางด้านบนและตัดส่วนบนของเนื้อหาออก ด้านล่างนี้คือสองสถานการณ์ ดู Fiddles ที่เกี่ยวข้อง หากปัญหายังไม่ชัดเจนให้ลดขนาดของหน้าต่างผลลัพธ์เพื่อบังคับให้สร้างแถบเลื่อน หมายเหตุ: แอปพลิเคชันนี้กำหนดเป้าหมายเฉพาะ Firefox, Chrome และ IE (IE11) เวอร์ชันล่าสุดซึ่งทั้งหมดนี้รองรับคำแนะนำของผู้สมัคร Flexboxดังนั้นความเข้ากันได้ของคุณลักษณะจึงไม่ควรเป็นปัญหา (ในทางทฤษฎี) แก้ไข : เมื่อใช้ Fullscreen API เพื่อแสดง div ด้านนอกแบบเต็มหน้าจอเบราว์เซอร์ทั้งหมดจะอยู่ตรงกลางอย่างถูกต้องโดยใช้ CSS ดั้งเดิม อย่างไรก็ตามเมื่อออกจากโหมดเต็มหน้าจอ IE จะเปลี่ยนกลับไปอยู่ตรงกลางในแนวนอนและแนวตั้งด้านบน แก้ไข : IE11 ใช้การใช้ Flexbox ที่ไม่ใช่ผู้ขายโดยเฉพาะ การอัปเดตรูปแบบกล่องยืดหยุ่น ("Flexbox") …

116 internet-explorer css flexbox internet-explorer-11

5

ตำแหน่งของฉัน: Sticky Element ไม่เหนียวเมื่อใช้ flexbox

ฉันติดอยู่กับเรื่องนี้เล็กน้อยและคิดว่าฉันจะแชร์สิ่งนี้position: sticky+ flexbox gotcha: เหนียว Div ของฉันทำงานได้ดีจนกระทั่งฉันเปลี่ยนมุมมองของฉันไปยังคอนเทนเนอร์กล่องดิ้นและทันใดนั้น div ก็ไม่เหนียวเมื่อถูกห่อด้วยแม่แบบ flexbox .flexbox-wrapper { display: flex; height: 600px; } .regular { background-color: blue; } .sticky { position: -webkit-sticky; position: sticky; top: 0; background-color: red; } <div class="flexbox-wrapper"> <div class="regular"> This is the regular box </div> <div class="sticky"> This is the sticky box …

115 css flexbox css-position sticky

8

รักษาอัตราส่วนของภาพเมื่อเปลี่ยนความสูง

เมื่อใช้โมเดล CSS flex box ฉันจะบังคับให้รูปภาพคงอัตราส่วนได้อย่างไร JS Fiddle: http://jsfiddle.net/xLc2Le0k/2/ สังเกตว่ารูปภาพยืดหรือหดเพื่อให้เต็มความกว้างของคอนเทนเนอร์ ไม่เป็นไร แต่เราสามารถยืดหรือหดความสูงเพื่อรักษาสัดส่วนของภาพได้หรือไม่? HTML <div class="slider"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> </div> CSS .slider { display: flex; } .slider img { margin: 0 5px; }

114 html css flexbox

2

ทำให้รายการดิ้นลอยไปทางขวา

ฉันมี <div class="parent"> <div class="child" style="float:right"> Ignore parent? </div> <div> another child </div> </div> ผู้ปกครองมี .parent { display: flex; } สำหรับลูกคนแรกของฉันฉันต้องการเพียงแค่ลอยสิ่งของไปทางขวา และ div อื่น ๆ ของฉันเพื่อทำตามกฎการยืดหยุ่นที่กำหนดโดยผู้ปกครอง สิ่งนี้เป็นไปได้หรือไม่? ถ้าไม่ฉันจะทำfloat: rightunder flex ได้อย่างไร?

114 html css flexbox

3

ฉันจะทำให้เลย์เอาต์ Flexbox ใช้พื้นที่แนวตั้ง 100% ได้อย่างไร

ฉันจะบอกได้อย่างไรว่าแถวเค้าโครง Flexbox ใช้พื้นที่แนวตั้งที่เหลืออยู่ในหน้าต่างเบราว์เซอร์ ฉันมีเลย์เอาต์ flexbox 3 แถว สองแถวแรกมีความสูงคงที่ แต่แถวที่ 3 เป็นแบบไดนามิกและฉันต้องการให้เบราว์เซอร์เติบโตจนเต็มความสูง ฉันมี flexbox อีกอันในแถวที่ 3 ซึ่งสร้างชุดคอลัมน์ หากต้องการปรับองค์ประกอบภายในคอลัมน์เหล่านี้อย่างถูกต้องฉันต้องการให้พวกเขาเข้าใจความสูงทั้งหมดของเบราว์เซอร์ - สำหรับสิ่งต่างๆเช่นสีพื้นหลังและการจัดแนวรายการที่ฐาน ในที่สุดเค้าโครงหลักจะมีลักษณะดังนี้: .vwrapper { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; //height: 1000px; } .vwrapper #row1 { background-color: red; } .vwrapper #row2 { background-color: blue; } .vwrapper …

111 html css flexbox

2

แถวที่มีความสูงเท่ากันใน CSS Grid Layout

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

110 css flexbox grid-layout css-grid

3

ฉันจะรวม Flexbox และการเลื่อนแนวตั้งในแอปความสูงเต็มได้อย่างไร

ฉันต้องการใช้แอปแบบเต็มความสูงโดยใช้ flexbox ฉันพบสิ่งที่ฉันต้องการโดยใช้โมดูลเลย์เอาต์ flexbox เก่า ( display: box;และสิ่งอื่น ๆ ) ในลิงค์นี้: แอพCSS3 Flexbox เต็มความสูงและโอเวอร์โฟลว์ นี่เป็นวิธีแก้ปัญหาที่ถูกต้องสำหรับเบราว์เซอร์ที่รองรับคุณสมบัติ Flexbox CSS เวอร์ชันเก่าเท่านั้น หากฉันต้องการลองใช้คุณสมบัติ flexbox ที่ใหม่กว่าฉันจะลองใช้วิธีที่สองในลิงค์เดียวกับที่ระบุว่าเป็นการแฮ็ก: โดยใช้คอนเทนเนอร์กับheight: 0px;. ทำให้แสดงการเลื่อนแนวตั้ง ฉันไม่ชอบมันมากนักเพราะมันแนะนำปัญหาอื่น ๆ และเป็นวิธีแก้ปัญหามากกว่าวิธีแก้ปัญหา html, body { height: 100%; } #container { display: flex; flex-direction: column; height: 100%; } #container article { flex: 1 1 auto; overflow-y: …

107 html css flexbox

8

ปรับขนาดภาพอัตโนมัติใน CSS FlexBox Layout และรักษา Aspect Ratio?

ฉันใช้เค้าโครงกล่องดิ้น CSS ซึ่งปรากฏดังที่แสดงด้านล่าง: หากหน้าจอเล็กลงจะเปลี่ยนเป็น: ปัญหาคือรูปภาพไม่ได้ถูกปรับขนาดโดยคงสัดส่วนภาพจากภาพต้นฉบับ เป็นไปได้ไหมที่จะใช้ CSS บริสุทธิ์และเค้าโครงกล่องดิ้นเพื่อให้ภาพถูกปรับขนาดหากหน้าจอเล็กลง นี่คือ html ของฉัน: <div class="content"> <div class="row"> <div class="cell"> <img src="http://i.imgur.com/OUla6mK.jpg"/> </div> <div class="cell"> <img src="http://i.imgur.com/M16WzMd.jpg"/> </div> </div> </div> CSS ของฉัน: .content { background-color: yellow; } .row { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; …

99 html css flexbox

2

วางตำแหน่งรายการสุดท้ายที่ยืดหยุ่นที่ส่วนท้ายของคอนเทนเนอร์

คำถามนี้เกี่ยวข้องกับเบราว์เซอร์ที่รองรับ css3 เต็มรูปแบบรวมถึง flexbox ฉันมีตู้คอนเทนเนอร์แบบยืดหยุ่นพร้อมสิ่งของบางอย่างอยู่ พวกเขาทั้งหมดมีเหตุผลที่จะเริ่มต้นแบบยืดหยุ่น แต่ฉันต้องการให้รายการสุดท้าย .endเป็นธรรมสำหรับ flex-end มีวิธีที่ดีในการดำเนินการโดยไม่ต้องแก้ไข HTML และไม่ต้องใช้การกำหนดตำแหน่งแบบสัมบูรณ์ .container { display: flex; flex-direction: column; outline: 1px solid green; min-height: 400px; width: 100px; justify-content: flex-start; } p { height: 50px; background-color: blue; margin: 5px; } <div class="container"> <p></p> <p></p> <p></p> <p class="end"></p> </div> เรียกใช้ข้อมูลโค้ดHide resultsขยายข้อมูลโค้ด

97 css flexbox

6

จัดกึ่งกลางเนื้อหาภายในคอลัมน์ใน Bootstrap 4

ฉันต้องการความช่วยเหลือในการแก้ไขปัญหาฉันต้องการจัดกึ่งกลางเนื้อหาภายในคอลัมน์ใน bootstrap4 โปรดค้นหารหัสของฉันด้านล่าง <div class="container"> <div class="row justify-content-center"> <div class="col-3"> <div class="nauk-info-connections"> </div> </div> </div>

95 twitter-bootstrap flexbox bootstrap-4

1

ป้องกันไม่ให้รายการดิ้นยืด

ตัวอย่าง: div { display: flex; height: 200px; background: tan; } span { background: red; } <div> <span>This is some text.</span> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด ฉันมีสองคำถามโปรด: ทำไมโดยพื้นฐานถึงเกิดขึ้นกับspan? อะไรคือแนวทางที่ถูกต้องในการป้องกันไม่ให้ยืดโดยไม่ส่งผลกระทบต่อสิ่งของอื่น ๆ ในภาชนะดิ้น?

94 html css flexbox

9

แถวที่มีความสูงเท่ากันในคอนเทนเนอร์แบบยืดหยุ่น

ในขณะที่คุณสามารถมองเห็นlist-itemsในครั้งแรกที่มีเหมือนกันrow heightแต่รายการในครั้งที่สองมีความแตกต่างกันrow ฉันต้องการทุกรายการจะมีเครื่องแบบheightsheight มีวิธีการเพื่อให้บรรลุนี้โดยไม่ให้การใด ๆคงที่สูงและเป็นเพียงการใช้flexbox ? นี่คือไฟล์ code .list { display: flex; flex-wrap: wrap; max-width: 500px; } .list-item { background-color: #ccc; display: flex; padding: 0.5em; width: 25%; margin-right: 1%; margin-bottom: 20px; } .list-content { width: 100%; } <ul class="list"> <li class="list-item"> <div class="list-content"> <h2>box 1</h2> <p>Lorem ipsum dolor sit amet, …

94 html css flexbox

4

'ตำแหน่ง: สัมบูรณ์' ขัดแย้งกับ Flexbox หรือไม่

ฉันต้องการให้divไม้ติดที่ด้านบนของหน้าจอโดยไม่มีผลกระทบใด ๆ ต่อองค์ประกอบอื่น ๆ และองค์ประกอบลูกอยู่ตรงกลาง .parent { display: flex; justify-content: center; position: absolute; } <div class="parent"> <div class="child">text</div> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด เมื่อฉันเพิ่มposition: absoluteบรรทัดjustify-content: centerกลายเป็นไม่ถูกต้อง พวกเขาขัดแย้งกันหรือไม่และทางออกคืออะไร? แก้ไข ขอบคุณพวกมันเป็นปัญหาของความกว้างของผู้ปกครอง แต่ฉันอยู่ใน React Native ดังนั้นฉันจึงไม่สามารถตั้งค่าwidth: 100%ได้ พยายามflex: 1และalign-self: stretchทั้งสองไม่ทำงาน ฉันลงเอยด้วยการใช้Dimensionsเพื่อรับความกว้างเต็มของหน้าต่างและใช้งานได้ แก้ไข ขณะที่รุ่นใหม่ตอบสนองพื้นเมือง (ฉันกับ 0.49) width: 100%ก็ยอมรับ

93 css react-native flexbox

7

ตอบสนองการกำหนดตำแหน่งกึ่งกลางแนวนอนแบบเนทีฟ

มันดูเหมือนว่าจะมีposition:absoluteการใช้งานเป็นองค์ประกอบที่ไม่สามารถใช้เป็นศูนย์กลางหรือjustifyContent alignItemsมีวิธีแก้ปัญหาในการใช้งานmarginLeftแต่ไม่ได้แสดงเหมือนกันสำหรับอุปกรณ์ทั้งหมดแม้จะใช้ขนาดเพื่อตรวจจับความสูงและความกว้างของอุปกรณ์ bottom: { position: 'absolute', justifyContent: 'center', alignItems: 'center', top: height*0.93, marginLeft: width*0.18, }, bottomNav: { flexDirection: 'row', },

93 position react-native flexbox absolute

คำถามติดแท็ก flexbox