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

ในการตั้งค่าระยะห่างน้อยที่สุดระหว่างรายการ flexbox ที่ฉันใช้margin: 0 5pxกับ.itemและmargin: 0 -5pxบนภาชนะ สำหรับฉันดูเหมือนว่าแฮ็ค แต่ฉันไม่สามารถหาวิธีที่ดีกว่านี้ ตัวอย่าง #box { display: flex; width: 100px; margin: 0 -5px; } .item { background: gray; width: 50px; height: 50px; margin: 0 5px; } <div id='box'> <div class='item'></div> <div class='item'></div> <div class='item'></div> <div class='item'></div> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล

777 css  flexbox 

มีวิธี flexbox-ish มากขึ้นในการจัดแนว "ที่อยู่ติดต่อ" ทางด้านขวามากกว่าที่จะใช้position: absoluteหรือไม่? .main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c { position: absolute; right: 0; } <h2>With title</h2> <div class="main"> <div class="a"><a href="#">Home</a></div> <div class="b"><a href="#">Some title centered</a></div> <div class="c"><a …

681 html  css  flexbox 

พิจารณาแกนหลักและแกนไขว้ของเฟล็กซ์คอนเทนเนอร์: ที่มา: W3C ในการจัดแนวไอเท็มแบบเฟล็กซ์ตามแกนหลักมีหนึ่งคุณสมบัติ: justify-content ในการจัดแนวไอเท็มแบบเฟล็กซ์ตามแนวแกนข้ามมีคุณสมบัติสามอย่าง: align-content align-items align-self ในภาพด้านบนแกนหลักเป็นแนวนอนและแกนไขว้เป็นแนวตั้ง นี่เป็นทิศทางเริ่มต้นของ flex container อย่างไรก็ตามทิศทางเหล่านี้สามารถเปลี่ยนได้อย่างง่ายดายด้วยflex-directionคุณสมบัติ /* main axis is horizontal, cross axis is vertical */ flex-direction: row; flex-direction: row-reverse; /* main axis is vertical, cross axis is horizontal */ flex-direction: column; flex-direction: column-reverse; (แกนไขว้จะตั้งฉากกับแกนหลักเสมอ) ประเด็นของฉันในการอธิบายวิธีการทำงานของแกนคือดูเหมือนจะไม่มีอะไรพิเศษเกี่ยวกับทิศทางใดทิศทางหนึ่ง แกนหลักแกนไขว้พวกเขาทั้งสองมีความสำคัญเท่าเทียมกันและflex-directionทำให้สามารถสลับไปมาได้ง่าย เหตุใดแกนไขว้จึงได้รับคุณสมบัติการจัดตำแหน่งสองแบบเพิ่มเติม ทำไมalign-contentและถูกalign-itemsรวมเข้าในคุณสมบัติเดียวสำหรับแกนหลัก? ทำไมแกนหลักไม่ได้รับjustify-selfคุณสมบัติ? สถานการณ์ที่คุณสมบัติเหล่านี้มีประโยชน์: วางสิ่งของแบบยืดหยุ่นไว้ที่มุมของภาชนะบรรจุแบบยืดหยุ่น …

677 css  flexbox  language-lawyer  w3c 

วิธีจัดกึ่งกลาง div ในแนวนอนและแนวตั้งภายในคอนเทนเนอร์โดยใช้ flexbox ในตัวอย่างด้านล่างฉันต้องการให้แต่ละตัวเลขด้านล่างซึ่งกันและกัน (เป็นแถว) ซึ่งอยู่กึ่งกลางแนวนอน .flex-container { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; justify-content: center; } row { width: 100%; } .flex-item { background: tomato; padding: 5px; width: 200px; height: 150px; margin: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; } …

671 html  css  flexbox 

ฉันพยายามเติมพื้นที่แนวตั้งของไอเท็มเฟล็กซ์ภายใน Flexbox .container { height: 200px; width: 500px; display: flex; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relative; flex: 1; background-color: red; } .flex-2-child { height: 100%; width: 100%; background-color: green; } <div class="container"> <div class="flex-1"></div> <div class="flex-2"> <div class="flex-2-child"></div> </div> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล และนี่คือJSFiddle …

459 css  flexbox 

ฉันมีสอง divs เคียงข้างกัน ฉันต้องการความสูงของพวกเขาที่จะเหมือนกันและอยู่ในระดับเดียวกันหากหนึ่งในนั้นปรับขนาด ฉันไม่สามารถคิดออกนี้ ไอเดีย? เพื่อชี้แจงคำถามที่สับสนของฉันฉันต้องการให้ทั้งสองกล่องมีขนาดเท่ากันเสมอดังนั้นหากหนึ่งกล่องโตขึ้นเนื่องจากมีการใส่ข้อความไว้อีกกล่องควรจะตรงกับความสูง <div style="overflow: hidden"> <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px"> Some content!<br/> Some content!<br/> Some content!<br/> Some content!<br/> Some content!<br/> </div> <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px"> Some content! </div> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล

441 html  css  html-table  flexbox 

ฉันต้องการใช้ flexbox เพื่อจัดแนวเนื้อหาบางส่วนในแนวตั้ง<li>แต่ไม่ประสบความสำเร็จ ฉันตรวจสอบออนไลน์แล้วและบทเรียนจำนวนมากใช้ div wrapper ซึ่งได้รับalign-items:centerจากการตั้งค่าแบบยืดหยุ่นบนแม่ แต่ฉันสงสัยว่าเป็นไปได้ไหมที่จะตัดองค์ประกอบเพิ่มเติมนี้ออกไป ฉันเลือกที่จะใช้ flexbox %ในกรณีนี้เป็นความสูงของรายการจะเป็นแบบไดนามิก * { padding: 0; margin: 0; } html, body { height: 100%; } ul { height: 100%; } li { display: flex; justify-content: center; align-self: center; background: silver; width: 100%; height: 20%; } <ul> <li>This is the text</li> </ul> …

424 html  css  flexbox 

ฉันต้องการจัดให้ 3 divs อยู่ภายใน container div อย่างนี้: [[LEFT] [CENTER] [RIGHT]] div คอนเทนเนอร์กว้าง 100% (ไม่มีความกว้างที่ตั้งไว้) และ div center ควรอยู่ในกึ่งกลางหลังจากปรับขนาดคอนเทนเนอร์ ดังนั้นฉันจึงตั้ง: #container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 auto;width:100px;} แต่มันจะกลายเป็น: [[LEFT] [CENTER] ] [RIGHT] เคล็ดลับใด ๆ

392 html  css  flexbox  alignment  css-float 

ฉันมีเลย์เอาต์แบบเฟล็กซ์บ็อกซ์ที่เรียบง่ายพร้อมคอนเทนเนอร์เช่น: .grid { display: flex; flex-flow: row wrap; justify-content: space-between; } ตอนนี้ฉันต้องการให้รายการในแถวสุดท้ายสอดคล้องกับอีกรายการ justify-content: space-between;ควรใช้เนื่องจากความกว้างและความสูงของตารางสามารถปรับได้ ขณะนี้ดูเหมือนว่า ที่นี่ฉันต้องการให้รายการที่ด้านล่างขวาเป็น "คอลัมน์กลาง" อะไรคือวิธีที่ง่ายที่สุดในการบรรลุเป้าหมายนั้น? นี่คือjsfiddleขนาดเล็กที่แสดงพฤติกรรมนี้ .exposegrid { display: flex; flex-flow: row wrap; justify-content: space-between; } .exposetab { width: 100px; height: 66px; background-color: rgba(255, 255, 255, 0.2); border: 1px solid rgba(0, 0, 0, 0.4); border-radius: 5px; box-shadow: …

378 css  flexbox  grid-layout 

ฉันมีลูกdivกับ: <div class="content"> <h1>heading 1</h1> <h2>heading 2</h2> <p>Some more or less text</p> <a href="/" class="button">Click me</a> </div> และฉันต้องการเค้าโครงต่อไปนี้: ------------------- |heading 1 | |heading 2 | |paragraph text | |can have many | |rows | | | | | | | |link-button | ------------------- ไม่ว่าจะมีข้อความมากแค่ไหนในpฉันต้องการที่จะติด.buttonที่ด้านล่างเสมอโดยไม่ทำให้มันไหลออกมา ฉันได้ยินมาว่าสิ่งนี้สามารถทำได้ด้วย Flexbox แต่ฉันไม่สามารถใช้งานได้

374 html  css  flexbox 

ความพยายามในการนำทาง flexbox ที่มีมากถึง 5 รายการและน้อยที่สุดเท่าที่ 3 แต่จะไม่แบ่งความกว้างเท่ากันระหว่างองค์ประกอบทั้งหมด ซอ บทช่วยสอนที่ฉันสร้างแบบจำลองนี้หลังจากนั้นคือhttp://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/ SASS * { font-size: 16px; } .tabs { max-width: 1010px; width: 100%; height: 5rem; border-bottom: solid 1px grey; margin: 0 0 0 6.5rem; display: table; table-layout: fixed; } .tabs ul { margin: 0; display: flex; flex-direction: row; } .tabs ul li …

368 html  css  flexbox 

ใครสามารถแสดงให้ฉันเห็นความแตกต่างระหว่างalign-itemsและalign-content?

366 css  layout  flexbox  alignment 

ฉันจะจัดตำแหน่งรายการ navbar ให้ถูกต้องได้อย่างไร? ฉันต้องการเข้าสู่ระบบและลงทะเบียนทางด้านขวา แต่ทุกสิ่งที่ฉันลองดูเหมือนจะไม่ทำงาน นี่คือสิ่งที่ฉันได้ลองไปแล้ว: <div>รอบ ๆ<ul>ด้วยแอททริบิวต์:style="float: right" <div>รอบ ๆ<ul>ด้วยแอททริบิวต์:style="text-align: right" ลองสองสิ่งเหล่านี้บน<li>แท็ก ลองทุกสิ่งเหล่านั้นอีกครั้งโดย!importantเพิ่มไปยังจุดสิ้นสุด เปลี่ยนnav-itemเป็นnav-rightใน<li> เพิ่มpull-sm-rightคลาสให้กับ<li> เพิ่มalign-content-endคลาสให้กับ<li> นี่คือรหัสของฉัน: <div id="app" class="container"> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home …

341 css  twitter-bootstrap  flexbox  bootstrap-4  navbar 

ฉันกำลังพยายามจัดองค์ประกอบในแนวตั้งภายใน wrapper ID ฉันให้ทรัพย์สินdisplay:inline-flex;แก่ ID นี้เนื่องจาก ID wrapper เป็น flex container แต่การนำเสนอไม่แตกต่างกัน ฉันคาดว่าทุกอย่างในรหัส wrapper จะปรากฏinlineขึ้น ทำไมไม่เป็นเช่นนั้น? #wrapper { display: inline-flex; /*no difference to display:flex; */ } <body> <div id="wrapper"> <header>header</header> <nav>nav</nav> <aside>aside</aside> <main>main</main> <footer>footer</footer> </div> </body> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล

331 css  flexbox 

ฉันพยายามจัดกึ่งกลางคอนเทนเนอร์ของฉันที่กึ่งกลางหน้าโดยใช้ Bootstrap 4 ฉันยังไม่ประสบความสำเร็จ ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชม ฉันได้สร้างมันขึ้นที่Codepen.ioเพื่อให้พวกคุณสามารถเล่นกับมันและแจ้งให้เราทราบว่าอะไรที่ทำงานได้ดีในขณะที่ฉันกำลังออกความคิด ... แสดงตัวอย่างโค้ด var currentAuthor = ""; var currentQuote = ""; function randomQuote() { $.ajax({ url: "https://api.forismatic.com/api/1.0/?", dataType: "jsonp", data: "method=getQuote&format=jsonp&lang=en&jsonp=?", success: function( response ) { $("#quote-content").html('<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"> ' + response.quoteText + ' <i class="fa fa-quote-right" aria-hidden="true"></i></h2>'); $("#quote-author").html('<p id="quote-author" …

322 html  css  twitter-bootstrap  flexbox  bootstrap-4