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

ฉันต้องการใช้ flexbox ที่มีจำนวนรายการที่มีความกว้างเท่ากันทั้งหมด ฉันสังเกตว่าเฟล็กบ็อกซ์กระจายพื้นที่รอบ ๆ อย่างสม่ำเสมอมากกว่าพื้นที่ ตัวอย่างเช่น: .header { display: flex; } .item { flex-grow: 1; text-align: center; border: 1px solid black; } <div class="header"> <div class="item">asdfasdfasdfasdfasdfasdf</div> <div class="item">z</div> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล รายการแรกมีขนาดใหญ่กว่าชิ้นที่สองมาก ถ้าฉันมี 3 รายการ 4 รายการหรือ n รายการฉันต้องการให้พวกเขาทั้งหมดปรากฏในบรรทัดเดียวกันด้วยจำนวนช่องว่างต่อรายการเท่ากัน ความคิดใด ๆ http://codepen.io/anon/pen/gbJBqM

186 css  flexbox 

พิจารณาตัวอย่างต่อไปนี้: .parent { display: flex; flex-direction: column; width: 400px; border: 1px solid red; align-items: center; } .child { border: 1px solid blue; } <div class="parent"> <div class="child"> Lorem Ipsum is simply dummy text of the printing and typesetting industry </div> <div class="child"> Lorem Ipsum is simply dummy text of the …

176 css  internet-explorer  flexbox  internet-explorer-11 

ฉันกำลังทำงานกับโครงร่าง flexbox ที่ซ้อนกันซึ่งควรทำงานดังนี้: ระดับนอกสุด ( ul#main) เป็นรายการแนวนอนที่ต้องขยายไปทางขวาเมื่อมีการเพิ่มรายการเข้าไปในรายการเพิ่มเติม ถ้ามันใหญ่เกินไปมันควรจะมีแถบเลื่อนแนวนอน #main { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; /* ...and more... */ } แต่ละรายการในรายการนี้ ( ul#main > li) มีส่วนหัว ( ul#main > li > h2) และรายการภายใน ( ul#main > li > ul.tasks) รายการด้านในนี้เป็นแนวตั้งและควรตัดเข้าไปในคอลัมน์เมื่อจำเป็น เมื่อตัดเป็นคอลัมน์เพิ่มเติมความกว้างควรเพิ่มเพื่อให้มีที่ว่างสำหรับรายการเพิ่มเติม การเพิ่มความกว้างนี้ควรใช้กับรายการที่มีของรายการด้านนอกด้วย .tasks { flex-direction: column; flex-wrap: …

168 html  css  flexbox 

ฉันต้องการที่จะมีA BและCจัดให้อยู่ตรงกลาง ฉันจะได้รับDที่จะไปอย่างสมบูรณ์เพื่อที่เหมาะสมหรือไม่ ก่อน: หลังจาก: ul { padding: 0; margin: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; } li { display: flex; margin: 1px; padding: 5px; background: #aaa; } li:last-child { background: #ddd; /* magic to throw to the right*/ } <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> เรียกใช้ข้อมูลโค้ดHide …

167 html  css  flexbox 

ลองนึกภาพเลย์เอาต์ต่อไปนี้โดยที่จุดแสดงถึงช่องว่างระหว่างกล่อง [Left box]......[Center box]......[Right box] เมื่อฉันลบกล่องขวาฉันชอบกล่องตรงกลางที่จะยังคงอยู่ในศูนย์เช่น: [Left box]......[Center box]................. สิ่งเดียวกันจะเกิดขึ้นหากฉันจะลบกล่องด้านซ้าย ................[Center box]................. ตอนนี้เมื่อเนื้อหาภายในกล่องกลางยาวขึ้นมันจะใช้พื้นที่มากเท่าที่จำเป็นในขณะที่เหลืออยู่กึ่งกลาง กล่องด้านซ้ายและขวาจะไม่ย่อขนาดดังนั้นเมื่อไม่มีที่ว่างเหลืออยู่overflow:hiddenและtext-overflow: ellipsisจะมีผลในการทำลายเนื้อหา [Left box][Center boxxxxxxxxxxxxx][Right box] ทั้งหมดข้างต้นเป็นสถานการณ์ในอุดมคติของฉัน แต่ฉันไม่รู้ว่าจะทำสิ่งนี้ได้อย่างไร เพราะเมื่อฉันสร้างโครงสร้างแบบยืดหยุ่นเช่นนั้น: .parent { display : flex; // flex box justify-content : space-between; // horizontal alignment align-content : center; // vertical alignment } ถ้ากล่องซ้ายและขวามีขนาดเท่ากันฉันจะได้เอฟเฟกต์ที่ต้องการ อย่างไรก็ตามเมื่อหนึ่งในสองนั้นมาจากขนาดที่แตกต่างกันกล่องที่อยู่ตรงกลางไม่ได้อยู่กึ่งกลางอีกต่อไปอย่างแท้จริง มีใครบ้างที่สามารถช่วยฉันได้บ้าง ปรับปรุง A justify-selfจะดีนี่จะเหมาะ: .leftBox …

162 html  css  flexbox  centering 

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

161 html  css  twitter-bootstrap  flexbox 

Flexbox มีพฤติกรรมนี้ซึ่งทำให้รูปภาพมีความสูงตามธรรมชาติ กล่าวอีกนัยหนึ่งถ้าฉันมีคอนเทนเนอร์แบบเฟล็กบ็อกซ์พร้อมรูปลูกและฉันปรับขนาดความกว้างของภาพความสูงจะไม่ปรับขนาดเลยและภาพจะยืดออก div { display: flex; flex-wrap: wrap; } img{ width: 50% } <div> <img src="https://loremflickr.com/400/300" > <h4>Appify</h4> <p> some text </p> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล อะไรทำให้เกิดสิ่งนี้ ฉันเพิ่มCodePen นี้เพื่อแสดงว่าฉันหมายถึงอะไร

156 html  css  flexbox 

ฉันมีภาชนะที่มี<div> แต่ก็มีเด็ก display: flex<a> ฉันจะทำให้เด็กปรากฏเป็น "อินไลน์" ได้อย่างไร โดยเฉพาะฉันจะกำหนดความกว้างของเด็กตามเนื้อหาได้อย่างไรและไม่ขยายไปถึงความกว้างของผู้ปกครอง สิ่งที่ฉันพยายาม: ฉันตั้งค่าให้เด็กdisplay: inline-flexแต่ก็ยังใช้ความกว้างเต็ม ฉันยังลองคุณสมบัติการแสดงผลอื่น ๆ ทั้งหมด แต่ไม่มีผลใด ๆ ตัวอย่าง: .container { background: red; height: 200px; flex-direction: column; padding: 10px; display: flex; } a { display: inline-flex; padding: 10px 40px; background: pink; } <div class="container"> <a href="#">Test</a> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล http://codepen.io/donpinkus/pen/YGRxRY

154 html  css  flexbox 

CodePen: http://codepen.io/anon/pen/RPNpaP ฉันต้องการให้กล่องสีแดงกว้างเพียง 25 ซม. เมื่ออยู่ในมุมมองแบบเคียงข้างกัน - ฉันพยายามทำสิ่งนี้ให้สำเร็จด้วยการตั้งค่า CSS ในข้อความค้นหาสื่อนี้: @media all and (min-width: 811px) {...} ถึง: .flexbox .red { width: 25em; } แต่เมื่อฉันทำสิ่งนี้เกิดขึ้น: http://i.imgur.com/niFBrwt.png มีความคิดอะไรที่ฉันทำผิดหรือเปล่า?

149 html  css  flexbox 

ฉันมี flexbox ซ้าย - ขวา: .wrapper { display: flex; flex-direction: row; align-items: stretch; width: 100%; height: 70vh; min-height: 325px; max-height:570px; } <div class="wrapper"> <div class="left">Left</div> <div class="right">Right</div> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด ปัญหาคือเด็กที่ถูกต้องไม่แสดงพฤติกรรมตอบสนอง เพื่อให้เจาะจงฉันต้องการให้มันเต็มความสูงของกระดาษห่อหุ้ม จะทำอย่างไรให้สำเร็จ?

148 css  flexbox 

ฉันจำเป็นต้องใช้รูปแบบการก่ออิฐค่อนข้างทำงาน อย่างไรก็ตามด้วยเหตุผลหลายประการฉันไม่ต้องการใช้ JavaScript เพื่อทำมัน พารามิเตอร์: องค์ประกอบทั้งหมดมีความกว้างเท่ากัน องค์ประกอบมีความสูงที่ไม่สามารถคำนวณฝั่งเซิร์ฟเวอร์ (รูปภาพพร้อมข้อความจำนวนมาก) ฉันสามารถอยู่กับคอลัมน์จำนวนคงที่ถ้าฉันต้อง มีวิธีการแก้ปัญหาที่น่ารำคาญนี้ที่ทำงานในเบราว์เซอร์ที่ทันสมัยคุณสมบัติcolumn-count ปัญหาของการแก้ปัญหานั้นก็คือการเรียงลำดับองค์ประกอบในคอลัมน์: ในขณะที่ฉันต้องการองค์ประกอบที่จะสั่งซื้อในแถวอย่างน้อยประมาณ: แนวทางที่ฉันได้ลองแล้วไม่ได้ผล: ทำรายการdisplay: inline-block: เปลืองพื้นที่แนวตั้ง ทำรายการfloat: left: ฮ่า ๆ ๆ ตอนนี้ฉันสามารถเปลี่ยนการเรนเดอร์ฝั่งเซิร์ฟเวอร์และเรียงลำดับรายการใหม่โดยหารจำนวนรายการด้วยจำนวนคอลัมน์ แต่มันซับซ้อนข้อผิดพลาดง่าย (ขึ้นอยู่กับวิธีที่เบราว์เซอร์ตัดสินใจแบ่งรายการเป็นคอลัมน์) ดังนั้นฉันต้องการ เพื่อหลีกเลี่ยงถ้าเป็นไปได้ มีเวทเฟล็กบ็อกซ์แบบใหม่ที่ทำให้สิ่งนี้เป็นไปได้หรือไม่?

134 html  css  flexbox  css-grid 

ในฐานะที่เราทุกคนรู้ว่าflexคุณสมบัติเป็นชวเลขสำหรับflex-grow, flex-shrinkและflex-basisคุณสมบัติ ค่าเริ่มต้นคือ0 1 autoซึ่งหมายความว่า flex-grow: 0; flex-shrink: 1; flex-basis: auto; แต่ฉันได้สังเกตเห็นในหลายสถานที่flex: 1จะใช้ ชวเลขเพื่อ1 1 autoหรือ1 0 auto? ฉันไม่เข้าใจความหมายและฉันไม่ได้รับอะไรเลยเมื่อฉันใช้ Google

131 css  flexbox 

โค้ดต่อไปนี้สามารถพบได้ในตัวอย่างจริงนี้ ฉันมีองค์ประกอบพื้นเมืองตอบสนองต่อไปนี้: 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View style={styles.container}> <View style={styles.descriptionContainerVer}> <View style={styles.descriptionContainerHor}> <Text style={styles.descriptionText} numberOfLines={5} > Here is a really long text that you can do nothing about, its gonna …

124 css  reactjs  react-native  flexbox 

ด้วย CSS ทั่วไปฉันสามารถลอยหนึ่งในสองคอลัมน์ไปทางซ้ายและอีกคอลัมน์หนึ่งทางขวาโดยมีช่องว่างระหว่างราง ฉันจะทำอย่างไรกับ flexbox http://jsfiddle.net/1sp9jd32/ #container { width: 500px; border: solid 1px #000; display: -webkit-flex; display: -ms-flexbox; display: flex; } #a { width: 20%; border: solid 1px #000; } #b { width: 20%; border: solid 1px #000; height: 200px; } <div id="container"> <div id="a"> a </div> <div id="b"> b …

123 html  css  flexbox 

ฉันพบกระทู้นี้ - คุณจะยืดรูปภาพเพื่อเติม <div> ได้อย่างไรในขณะที่รักษาอัตราส่วนของรูปภาพ - นั่นไม่ใช่สิ่งที่ฉันต้องการทั้งหมด ฉันมี div ขนาดหนึ่งและมีรูปภาพอยู่ข้างใน ฉันต้องการที่จะเสมอเติมออก div กับภาพโดยไม่คำนึงว่าภาพที่เป็นแนวนอนหรือแนว และไม่สำคัญว่าภาพจะถูกตัดออก (ตัว div นั้นซ่อนอยู่มากเกินไป) ดังนั้นหากรูปภาพเป็นแนวตั้งฉันต้องการwidthให้เป็นแบบนั้น100%และheight:autoเพื่อให้มันคงสัดส่วน หากรูปภาพเป็นแนวนอนฉันต้องการheightให้เป็น100%และwidth to beอัตโนมัติ " ฟังดูซับซ้อนใช่มั้ย? <div class="container"> <img src="some-image.jpg" alt="Could be portrait or landscape"/> </div> เนื่องจากฉันไม่รู้ว่าจะทำอย่างไรฉันจึงสร้างภาพสั้น ๆ ว่าฉันหมายถึงอะไร ฉันอธิบายไม่ถูกด้วยซ้ำ ดังนั้นฉันเดาว่าฉันไม่ใช่คนแรกที่ถามเรื่องนี้ อย่างไรก็ตามฉันไม่สามารถหาวิธีแก้ปัญหานี้ได้ อาจจะมีวิธีใหม่ของ CSS3 ในการทำสิ่งนี้ - ฉันกำลังคิดถึง flex-box ความคิดใด ๆ ? บางทีมันอาจจะง่ายกว่าที่ฉันคาดไว้?

120 image  css  positioning  flexbox