flexbox

HTML CSS video inside flexbox

由 会有一股神秘感。 提交于 2021-01-28 06:02:07
问题 <!DOCTYPE html> <html> <style> .d1 { background: blue; padding: 10px; display: flex; } video { margin: 10px; width: 100%; max-width: 500px; } </style> <body> <div class="d1"> <video controls> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video> </div> </body> </html> I use a video inside a flexbox like the above and the code works fine except two points: 1) The video size does not fit the control line that

Why don't flex items shrink past content size?

由 只谈情不闲聊 提交于 2021-01-28 05:47:45
问题 I have 4 flexbox columns and everything works fine, but when I add some text to a column and set it to a big font size, it is making the column wider than it should be due to the flex property. I tried to use word-break: break-word and it helped, but still when I resize the column to a very small width, letters in the text are broken into multiple lines (one letter per line), and yet the column does not get smaller width than one letter size. Watch this video (at the start, the first column

How to make the last items in my CSS grid stretch full width with equal spacing?

由 南笙酒味 提交于 2021-01-28 05:40:19
问题 I am new to using CSS grid and have stumbled across a problem that I can't find an answer online. What I am trying to achieve is a 7 column layout, and the remaining items to stretch in width equally to fill up the remaining space. I have attempted to use auto-fill & auto-fit as I found online, but this didn't tackle my problem. I am not sure if this can be achieved in CSS grid and I may have to use flexbox? I would like "Eight", "Nine" and "Ten" to stretch full width to be inline with the

Set vertical scrollbar on flex children, not whole page

由 我的梦境 提交于 2021-01-28 05:09:22
问题 I am trying to make a page which consists of a header, a left nav and some content. I would like the left nav and the content to reach up to the bottom of the viewport, so that no scroll bar appears for the whole page. However both the left nav and the content can be very large, so I would like each of them to have a scroll for overflow-y . I have tried using blocks/floats but didn't manage to achieve my intended result. I saw that flex has the flex-grow which seemed to offer a solution,

Incorrect scrollWidth on child of flex container

由 坚强是说给别人听的谎言 提交于 2021-01-27 19:00:35
问题 According to w3schools: The scrollWidth and scrollHeight properties return the entire height and width of an element, including the height and width that is not viewable (because of overflow). If that's the case, why is the scrollWidth of an element inside a narrower flex parent reported as the visible portion only? document.body.append("Bar 1 scrollWidth = " + document.getElementById("inner1").scrollWidth); document.body.appendChild(document.createElement("br")); document.body.append("Bar 2

Why does my column gap get smaller when I increase the width of my container?

由 本秂侑毒 提交于 2021-01-27 18:20:25
问题 I'm having a hard time understanding the logic behind the column gap in a multi-column layout. I have the following HTML/CSS in this Fiddle: <div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> </div> .flex-container { height: 500px; width: 300px; border: 1px solid blue; columns: 120px; padding: 10px; } .flex-item { background: OliveDrab; padding: 5px; width: 100px; height: 100px; line-height: 100px; color: white; text-align: center; break-inside: avoid

css - how to position <li> in horizontal <ul>?

由 社会主义新天地 提交于 2021-01-27 18:00:59
问题 I have section , which contains horizontal ul , which contains four li 's, as following: #header-strip ul { display: flex; justify-content: space-between; margin: 0; padding: 0; height: 4vh; width: 100%; background-color: grey; list-style-type: none; } #header-strip li { display: inline; } <section id="header-strip"> <ul> <li>meant to be left</li ><li>meant to be centered</li ><li>meant to be just before last</li ><li>meant to be right</li > </ul> </section> Requirements: - first item at left

Parent flexbox container ignores child's flexbox min-width

由 时光总嘲笑我的痴心妄想 提交于 2021-01-27 15:50:59
问题 A very short prehistory My story begins with struggling to make overflow-wrap: break-word; working inside a flexbox. Flexbox container didn't want to understand that its item can be shrunk despite the fact that the item can break long words: .body { width: 300px; border: 1px solid black; padding: 8px; background-color: #ccc; } .flex-column { display: flex; } .item { overflow-wrap: break-word; background-color: #fff; padding: 8px; } <div class="body"> <div class="flex-column"> <div class="item

Changing stack order between different rows flexbox

由 ↘锁芯ラ 提交于 2021-01-27 12:39:12
问题 Goodmorning. I am trying to change the stacking order in a flexbox situation, where there are 2 columns, but the first column contains a spot where the second column needs to be put in between. So when on mobile I need them to be ordered different than source order. This is on large col 1 col 2 ----------============== [A] [C] [B] Where A and B are in one column, and C is in the other But on small breakpoint, it needs to be [A] [C] [B] Is this possible using just Flexbox? So to clarify. The

Changing stack order between different rows flexbox

由 左心房为你撑大大i 提交于 2021-01-27 12:34:38
问题 Goodmorning. I am trying to change the stacking order in a flexbox situation, where there are 2 columns, but the first column contains a spot where the second column needs to be put in between. So when on mobile I need them to be ordered different than source order. This is on large col 1 col 2 ----------============== [A] [C] [B] Where A and B are in one column, and C is in the other But on small breakpoint, it needs to be [A] [C] [B] Is this possible using just Flexbox? So to clarify. The
订阅 flexbox