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

ฉันมีตู้คอนเทนเนอร์ที่มีดิ้นสองรายการ ฉันต้องการตั้งค่าระยะขอบบนเส้นที่สอง แต่เฉพาะเมื่อมันถูกพันและไม่อยู่ที่เส้นโค้งแรก ถ้าเป็นไปได้ฉันต้องการหลีกเลี่ยงการใช้แบบสอบถามสื่อ ฉันคิดว่าขอบล่างขององค์ประกอบแรกอาจเป็นวิธีแก้ปัญหา อย่างไรก็ตามมันจะเพิ่มช่องว่างที่ด้านล่างเมื่อองค์ประกอบไม่ได้ถูกรวมเข้าด้วยกันปัญหาเดียวกัน นี่คือรหัสของฉัน: .container { display: flex; flex-wrap: wrap; justify-content: space-around; } .item-big { background: blue; width: 300px; } .item-small { background: red; margin-top: 30px; } <div class="container"> <div class="item-big"> FIRST BIG ELEM </div> <div class="item-small"> SECOND SMALL ELEM </div> </div> เรียกใช้ข้อมูลโค้ดHide resultsขยายข้อมูลโค้ด

93 css  margin  flexbox 

ฉันต้องการให้รายการดิ้นอยู่ตรงกลาง แต่เมื่อเรามีบรรทัดที่สองให้มี 5 (จากภาพด้านล่าง) ต่ำกว่า 1 และไม่อยู่กึ่งกลางในพาเรนต์ นี่คือตัวอย่างของสิ่งที่ฉันมี: ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; } li { list-style-type: none; border: 1px solid gray; margin: 15px; padding: 5px; width: 200px; } <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด http://jsfiddle.net/8jqbjese/2/

92 html  css  flexbox 

ฉันพยายามที่จะศูนย์องค์ประกอบภายในของ<button>-tag กับ justify-content: centerflexbox แต่ Safari ไม่ได้อยู่ตรงกลาง ฉันสามารถใช้สไตล์เดียวกันกับแท็กอื่น ๆ และทำงานได้ตามที่ต้องการ (ดู<p>แท็ก -tag) มีเพียงปุ่มเท่านั้นที่จัดชิดซ้าย ลองใช้ Firefox หรือ Chrome แล้วคุณจะเห็นความแตกต่าง มีลักษณะตัวแทนผู้ใช้ที่ฉันต้องเขียนทับหรือไม่? หรือวิธีแก้ปัญหาอื่น ๆ สำหรับปัญหานี้? div { display: flex; flex-direction: column; width: 100%; } button, p { display: flex; flex-direction: row; justify-content: center; } <div> <button> <span>Test</span> <span>Test</span> </button> <p> <span>Test</span> <span>Test</span> </p> …

91 html  css  safari  flexbox  css-grid 

ฉันอยู่ตรงกลาง DIV ในอีก DIV โดยใช้ flexbox นึกถึงหน้าต่างข้อความที่ปรากฏขึ้นตรงกลางหน้าจอเมื่อจำเป็น มันใช้งานได้ดี แต่มันจะดูดีขึ้นมากถ้าพื้นที่ด้านบนและด้านล่างของกล่องโต้ตอบไม่เท่ากันโดยมี 40% ของพื้นที่ที่เหลืออยู่ด้านบนและด้านล่างของกล่องโต้ตอบ 60% มันซับซ้อนมากเนื่องจากความสูงของกล่องโต้ตอบจะแตกต่างกันไปตามจำนวนข้อความภายใน ตัวอย่างเช่นหากความสูงของเบราว์เซอร์คือ 1,000 px และความสูงของหน้าต่างข้อความโต้ตอบคือ 400 px ฉันต้องการพื้นที่แนวตั้งที่เหลือ (600 px) เป็น 240 px ด้านบนและด้านล่างกล่องโต้ตอบ 360 px ฉันสามารถใช้ Javascript ได้ แต่ฉันอยากรู้ว่า CSS มีวิธีที่ชาญฉลาดหรือไม่ ฉันพยายามเพิ่มระยะขอบด้านล่างลงใน #dialogBox DIV แต่ไม่ได้ผลเมื่อความสูงของกล่องโต้ตอบใกล้กับความสูงของเบราว์เซอร์ #dialogBoxPanel { position:absolute; display:flex; align-items:center; justify-content:center; left:0px; top:0px; width:100%; height:100%; } #dialogBox …

23 html  css  flexbox  centering 

ฉันกำลังพยายามสร้างระบบเมนูที่มีรูปภาพและข้อความด้านบนและด้านล่าง ข้อมูลเป็นแบบไดนามิก ฉันต้องการให้ระบบเมนูปรากฏขึ้นเพื่อให้แต่ละภาพมีระยะทางเท่ากันจากภาพอื่น ๆ เพื่อให้พวกเขาเข้าแถวในตารางภาพทั้งแนวนอนและแนวตั้ง ปัญหาคือข้อความ หากข้อความยาวเกินกว่าที่รูปภาพแสดง div จะขยายใหญ่ขึ้น อย่างไรก็ตามมันจะสร้างช่องว่างที่ดูแปลก ๆ เนื่องจากรูปภาพไม่ได้เว้นระยะเท่ากัน ในการหลีกเลี่ยงปัญหานี้ฉันคิดว่าวิธีที่ดีที่สุดคือการให้กองหน้าที่อื่น ๆ ใช้ขนาดของแผนกที่ใหญ่ขึ้น อย่างไรก็ตามฉันไม่แน่ใจว่าจะทำสิ่งนี้อย่างไร ฉันลองด้วย flexbox โดยใช้flex-wrapคุณสมบัติ แม้ว่ามันจะถูกห่อหุ้มอย่างดี แต่ฉันก็ไม่สามารถหาวิธีที่จะทำให้แต่ละภาพเรียงกันในระยะทางเท่ากัน ฉันจะทำอย่างไรเพื่อให้บรรลุเป้าหมายนี้ รหัสของฉันเป็นดังนี้: #outer { display: flex; } #main { display: flex; justify-content: space-between; flex-wrap: wrap; border: solid black 25px; border-radius: 25px; width: 450px; height: 500px; padding: 20px; } .section …

17 html  css  flexbox 

การแสดงแกลเลอรี่ภาพที่มีขนาดและสัดส่วนต่างกัน ไม่มีช่องว่าง (ระยะห่าง) ระหว่างรูปภาพ เคารพอัตราส่วนเดิมให้มากที่สุด รูปภาพล้อมรอบด้วยลิงค์ โซลูชันที่ไม่ใช่ JS รูปภาพอาจถูกครอบตัดเล็กน้อย โซลูชันแบบพกพา ชุดของภาพที่แสดงเป็นแบบสุ่ม รูปภาพจะต้องแสดงจากซ้ายไปขวา (ป้องกันการใช้คอลัมน์) ฉันประสบความสำเร็จด้วยโซลูชัน flexbox ต่อไปนี้: แสดงตัวอย่างโค้ด section { display: flex; flex-flow: row wrap; justify-content: center; } section a { flex: auto; } section img { height: 100%; width: 100%; object-fit: cover; } <!DOCTYPE html> <html lang="en"> <head> <title>Controlling flex …

9 css  flexbox  image-gallery 

ฉันเขียนโค้ดสคริปต์ (ด้วยความช่วยเหลือของผู้ใช้ที่นี่) ซึ่งช่วยให้ฉันขยาย div ที่เลือกและทำให้ div อื่นทำงานตามนั้นโดยยืดให้เท่ากันเพื่อให้พอดีกับพื้นที่ที่เหลือ (ยกเว้นอันแรกที่ความกว้างคงที่) และนี่คือภาพของสิ่งที่ฉันต้องการบรรลุ: เพื่อที่ฉันใช้ดิ้นและการเปลี่ยน ใช้งานได้ดี แต่สคริปต์ jQuery ระบุค่าการยืด "400%" (ซึ่งเหมาะสำหรับการทดสอบ) ตอนนี้ฉันต้องการให้ div ที่เลือกเพื่อขยาย / ย่อขนาดให้พอดีกับเนื้อหาแทนค่าคงที่ "400%" ฉันไม่รู้ว่าจะทำอย่างไร เป็นไปได้ไหม ? ฉันพยายามโคลน div ให้พอดีกับเนื้อหารับค่าจากนั้นใช้ค่านี้เพื่อเปลี่ยน แต่นั่นหมายความว่าฉันมีความกว้างเริ่มต้นเป็นเปอร์เซ็นต์ แต่เป็นค่าเป้าหมายเป็นพิกเซล ไม่ได้ผล และถ้าฉันแปลงค่าพิกเซลเป็นเปอร์เซ็นต์ผลลัพธ์จะไม่ตรงกับเนื้อหาไม่ว่าจะด้วยเหตุผลใดก็ตาม ในทุกกรณีนี่เป็นวิธีที่ซับซ้อนเล็กน้อยในการบรรลุสิ่งที่ฉันต้องการอยู่แล้ว ไม่มีคุณสมบัติยืดหยุ่นใด ๆ ที่สามารถเปลี่ยนเพื่อให้พอดีกับเนื้อหาของ div ที่เลือกหรือไม่ นี่คือรหัส ( แก้ไข / ลดความเรียบง่ายตั้งแต่อ่านดีขึ้น ): var expanded = ''; $(document).on("click", ".div:not(:first-child)", …

9 javascript  jquery  css  flexbox  css-transitions