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

ฉันกำลังพยายามตั้งค่ารูปแบบ flexbox ด้วยสามคอลัมน์ที่คอลัมน์ด้านซ้ายและขวามีความกว้างคงที่และคอลัมน์กลางจะงอเพื่อเติมเต็มพื้นที่ว่าง แม้จะมีการตั้งค่าขนาดสำหรับคอลัมน์ แต่ดูเหมือนว่าจะลดลงเมื่อหน้าต่างย่อขนาดลง ใครรู้วิธีการทำเช่นนี้? สิ่งเพิ่มเติมที่ฉันต้องทำคือซ่อนคอลัมน์ด้านขวาตามการโต้ตอบของผู้ใช้ในกรณีนี้คอลัมน์ด้านซ้ายจะยังคงความกว้างคงที่ แต่คอลัมน์กลางจะเติมส่วนที่เหลือของพื้นที่ #container { display: flex; justify-content: space-around; align-items: stretch; max-width: 1200px; } .column.left { width: 230px; } .column.right { width: 230px; border-left: 1px solid #eee; } .column.center { border-left: 1px solid #eee; } <div id="container"> <div class="column left"> <p>Anxiety was a blog series …

316 html  css  flexbox 

ฉันมี 4 flexbox column และทุกอย่างทำงานได้ดี แต่เมื่อฉันเพิ่มข้อความลงในคอลัมน์และตั้งเป็นขนาดตัวอักษรขนาดใหญ่มันทำให้คอลัมน์กว้างกว่าที่ควรจะเป็นเนื่องจากคุณสมบัติ flex ฉันพยายามใช้word-break: break-wordและช่วย แต่เมื่อฉันปรับขนาดคอลัมน์เป็นความกว้างขนาดเล็กมากตัวอักษรในข้อความจะถูกแบ่งออกเป็นหลายบรรทัด (หนึ่งตัวอักษรต่อบรรทัด) แต่คอลัมน์นั้นไม่ได้รับความกว้างที่เล็กกว่าขนาดตัวอักษรหนึ่งตัว . ดูวิดีโอนี้ (ในตอนแรกคอลัมน์แรกมีขนาดเล็กที่สุด แต่เมื่อฉันปรับขนาดหน้าต่างมันเป็นคอลัมน์ที่กว้างที่สุดฉันแค่ต้องการเคารพการตั้งค่าเฟล็กต์เสมอขนาดเฟล็กต์ 1: 3: 4: 4) ฉันรู้ว่าการตั้งค่าขนาดตัวอักษรและการเว้นช่องว่างเล็กลงจะช่วยได้ ... แต่มีวิธีแก้ไขปัญหาอื่นอีกหรือไม่ overflow-x: hiddenฉันไม่สามารถใช้ JSFiddle .container { display: flex; width: 100% } .col { min-height: 200px; padding: 30px; word-break: break-word } .col1 { flex: 1; background: orange; font-size: 80px …

312 html  css  flexbox 

คุณสามารถแทนที่align-itemsด้วยalign-selfสำหรับรายการที่ยืดหยุ่น ฉันกำลังมองหาวิธีที่จะแทนที่justify-contentรายการที่ยืดหยุ่น หากคุณมี flexbox container justify-content:flex-endแต่คุณต้องการให้ไอเท็มแรกเป็นแบบjustify-content: flex-startนั้นทำได้อย่างไร? นี่คือคำตอบที่ดีที่สุดโดยโพสต์นี้: https://stackoverflow.com/a/33856609/269396

283 css  flexbox 

ฉันใช้เฟล็กบ็อกซ์เพื่อแสดง 8 รายการที่จะปรับขนาดแบบไดนามิกกับหน้าของฉัน ฉันจะบังคับให้แยกรายการออกเป็นสองแถวได้อย่างไร (4 ต่อแถว)? นี่คือ snip ที่เกี่ยวข้อง: (หรือถ้าคุณชอบ jsfiddle - http://jsfiddle.net/vivmaha/oq6prk1p/2/ ) .parent-wrapper { height: 100%; width: 100%; border: 1px solid black; } .parent { display: flex; font-size: 0; flex-wrap: wrap; margin: -10px 0 0 -10px; } .child { display: inline-block; background: blue; margin: 10px 0 0 10px; …

260 html  css  flexbox 

ดังนั้นในการพยายามทำ modal ที่มีประโยชน์โดยใช้ flexbox ฉันพบสิ่งที่น่าจะเป็นปัญหาของเบราว์เซอร์และสงสัยว่ามีการแก้ไขหรือวิธีแก้ปัญหาที่รู้จักหรือแนวคิดในการแก้ไข สิ่งที่ฉันพยายามแก้ไขมีสองด้าน ก่อนอื่นให้นำหน้าต่าง modal กึ่งกลางแนวตั้งซึ่งทำงานตามที่คาดไว้ ที่สองคือการได้รับหน้าต่าง modal เพื่อเลื่อน - ภายนอกดังนั้นหน้าต่าง modal ทั้งหมดเลื่อนไม่เนื้อหาภายใน (นี่คือเพื่อให้คุณสามารถมีแบบเลื่อนลงและองค์ประกอบ UI อื่น ๆ ที่สามารถขยายนอกขอบเขตของ modal - เช่นเครื่องมือเลือกวันที่ที่กำหนดเอง ฯลฯ ) อย่างไรก็ตามเมื่อรวมการจัดกึ่งกลางแนวตั้งกับแถบเลื่อนด้านบนของ modal อาจไม่สามารถเข้าถึงได้เมื่อเริ่มล้น ในตัวอย่างข้างต้นคุณสามารถปรับขนาดเพื่อบังคับโอเวอร์โฟลว์และในการทำเช่นนั้นจะช่วยให้คุณเลื่อนไปที่ด้านล่างของคำกริยา แต่ไม่ไปด้านบน (ย่อหน้าแรกถูกตัดออก) นี่คือลิงค์ไปยังตัวอย่างโค้ด (ง่ายมาก) https://jsfiddle.net/dh9k18k0/2/ .modal-container { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, …

259 html  css  flexbox  browser-bugs 

Наэтотвопросестьответына Stack Overflow нарусском : รายการ Flexbox - переноснановуюстроку มีวิธีการแบ่งบรรทัดในหลายบรรทัด flexbox หรือไม่ ตัวอย่างเช่นการแตกหลังแต่ละรายการที่ 3 ในCodePenนี้ .container { background: tomato; display: flex; flex-flow: row wrap; align-content: space-between; justify-content: space-between; } .item { width: 100px; height: 100px; background: gold; border: 1px solid black; font-size: 30px; line-height: 100px; text-align: center; margin: 10px; } …

236 html  css  flexbox 

ฉันต้องการมีเมนูแนวตั้งที่มีความสูงเฉพาะ เด็กแต่ละคนต้องเติมความสูงของผู้ปกครองและมีข้อความที่อยู่ตรงกลาง จำนวนลูกเป็นแบบสุ่มดังนั้นฉันต้องทำงานกับค่าแบบไดนามิก Div .containerมีจำนวนลูกที่สุ่ม ( .item) ที่จะต้องเติมความสูงของพาเรนต์เสมอ เพื่อให้บรรลุว่าฉันใช้ flexbox สำหรับการสร้างลิงก์ที่มีข้อความตรงกลางฉันใช้display: table-cellเทคนิค แต่การใช้ตารางแสดงผลต้องใช้ความสูง 100% ปัญหาของฉัน.item-inner { height: 100% }คือไม่ทำงานใน webkit (Chrome) มีการแก้ไขสำหรับปัญหานี้หรือไม่? หรือมีเทคนิคที่แตกต่างกันในการ.itemเติมเต็มความสูงของผู้ปกครองด้วยข้อความแนวตั้งที่ตรงกลาง ตัวอย่างที่นี่ jsFiddle ควรดูใน Firefox และ Chrome .container { height: 20em; display: flex; flex-direction: column; border: 5px solid black } .item { flex: 1; border-bottom: 1px solid white; …

235 css  google-chrome  webkit  flexbox 

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

224 css  flexbox  width 

นี่คือรหัสที่ฉันใช้เพื่อให้ได้เลย์เอาต์ด้านบน: .header { height: 50px; } .body { position: absolute; top: 50px; right: 0; bottom: 0; left: 0; display: flex; } .sidebar { width: 140px; } .main { flex: 1; display: flex; flex-direction: column; } .content { flex: 1; display: flex; } .column { padding: 20px; border-right: 1px solid #999; …

214 css  layout  multiple-columns  flexbox 

วิธีการจัดกึ่งกลางข้อความใน ReactNative ทั้งในแนวนอนและแนวตั้ง ฉันมีตัวอย่างแอปพลิเคชันใน rnplay.org โดยที่justifyContent = "center"และalignItems = "center"ไม่ทำงาน: https://rnplay.org/apps/AoxNKQ ข้อความควรอยู่กึ่งกลาง และทำไมถึงมีระยะห่างระหว่างข้อความ (สีเหลือง) และคอนเทนเนอร์หลัก? รหัส: 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, Image, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View style={styles.container}> <View style={styles.topBox}> <Text style={styles.headline}>lorem ipsum{'\n'}ipsum lorem lorem</Text> …

212 reactjs  flexbox  react-native 

https://jsfiddle.net/vhem8scs/ เป็นไปได้หรือไม่ที่จะจัดแนวรายการสองรายการไว้ทางซ้าย ลิงก์แสดงอย่างชัดเจนยิ่งขึ้น ตัวอย่างสุดท้ายคือสิ่งที่ฉันต้องการบรรลุ ใน flexbox ฉันมีหนึ่งบล็อคของโค้ด ด้วย float ฉันมีโค้ดสี่บล็อก นั่นเป็นเหตุผลหนึ่งว่าทำไมฉันถึงชอบ flexbox HTML <div class="wrap"> <div>One</div> <div>Two</div> <div>Three</div> </div> <!-- DESIRED RESULT --> <div class="result"> <div>One</div> <div>Two</div> <div>Three</div> </div> CSS .wrap { display: flex; background: #ccc; width: 100%; justify-content: space-between; } .result { background: #ccc; margin-top: 20px; } .result:after { …

212 css  alignment  flexbox 

ฉันมี 2 divs เคียงข้างกันใน flexbox มือขวาควรมีความกว้างเท่ากันเสมอและฉันต้องการให้มือซ้ายจับที่เหลือ แต่จะไม่เว้นแต่ฉันจะตั้งค่าความกว้างเป็นพิเศษ ดังนั้นในขณะนี้มันถูกตั้งค่าเป็น 96% ซึ่งดูโอเคจนกระทั่งคุณสควอชหน้าจอจริงๆ - จากนั้น div มือขวาจะได้รับพื้นที่ที่ต้องการเล็กน้อย ฉันเดาว่าฉันจะทิ้งมันไว้อย่างที่มันเป็น แต่มันก็รู้สึกผิด - เหมือนจะต้องมีวิธีพูด: คนที่ใช่ก็เหมือนกันเสมอ คุณอยู่ทางซ้ายคุณจะได้ทุกอย่างที่เหลือ .ar-course-nav { cursor: pointer; padding: 8px 12px 8px 12px; border-radius: 8px; } .ar-course-nav:hover { background-color: rgba(0, 0, 0, 0.1); } <br/> <br/> <div class="ar-course-nav" style="display:flex; justify-content:space-between;"> <div style="width:96%;"> <div style="overflow:hidden; …

205 html  css  flexbox 

ผมพยายามที่จะสไตล์fieldsetองค์ประกอบด้วยและdisplay: flexdisplay: inline-flex แต่ก็ไม่ได้ทำงาน: flexทำตัวเหมือนblockและทำตัวเหมือนinline-flexinline-block สิ่งนี้เกิดขึ้นทั้งบน Firefox และ Chrome แต่ใช้งานกับ IE ได้อย่างแปลกประหลาด มันเป็นข้อบกพร่องหรือไม่? ฉันไม่พบที่fieldsetควรมีพฤติกรรมพิเศษใด ๆ ทั้งในHTML5หรือในรายละเอียดCSS เค้าโครงกล่องแบบยืดหยุ่น fieldset, div { display: flex; border: 1px solid; } <fieldset> <p>foo</p> <p>bar</p> </fieldset> <div> <p>foo</p> <p>bar</p> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล

204 html  css  flexbox 

ฉันได้อ่านการสอน flexbox หลายครั้งแล้ว แต่ฉันยังไม่สามารถทำงานง่าย ๆ นี้ได้ ฉันจะทำให้กล่องสีแดงกว้างถึง 100% ได้อย่างไร รหัส: <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Natives </Text> <Text style={styles.line1}> line1 </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu </Text> </View> รูปแบบ: container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', borderWidth: 1, …

203 flexbox  react-native 

ในรูปแบบ 3 แถว: แถวด้านบนควรมีขนาดตามเนื้อหา แถวด้านล่างควรมีความสูงคงที่เป็นพิกเซล แถวกลางควรขยายเพื่อเติมตู้คอนเทนเนอร์ ปัญหาคือว่าเมื่อเนื้อหาหลักขยายออกมันจะบีบแถวส่วนหัวและส่วนท้าย: HTML: <section> <header> header: sized to content <br>(but is it really?) </header> <div> main content: fills remaining space<br> x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> <!-- uncomment to see it break - -> x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> <!-- --> </div> <footer> footer: fixed height in px </footer> </section> CSS: …

196 css  layout  flexbox