flexbox

问题 I'd like to set up a fixed <div> , containing an icon, which expands from right to left when being hovered over (the <div> expands, not the icon), revealing a piece of text on the left side of the icon. The icon's position stays unchanged. Here's a sketch to help illustrate what I'd like to do: Changing the size of the <div> on hover is no issue, I simply add a class with a larger width (including a transition to animate the expansion). But I struggle with the positioning of the elements. I

问题 I'm trying to make the the elements with yellow background same height as others in that row using flex , but cannot figure it out with this design. The li elements just dont wan't to be at full height. Run the code snippet to see what I'm talking about. Thank you! html, body { height: 100%; margin: 0; padding: 0; } #main { width: 90%; padding: 0; margin: 0 auto; font-size: 0; } .wrapper { display: flex; width: 100%; height: 100%; flex-direction: column; } .header { background: yellow; flex:

问题 I'm trying to create flex box columns for web development. However, all I managed to do is produce one column of flex boxes. What are some basic CSS codes that would verify that the div cards always fill up the page grid and that for a width small enough, the contents are laid out in a single column. @charset "utf-8"; /* CSS Code */ section { display: flexbox; flex-direction: row; flex-wrap: wrap-reverse; } div.card { display: flex; flex-basis: 200px; flex-grow: 1; flex-shrink: 1; flex

问题 MDN has the default value of justify-content as normal but that's not listed in the list of accepted values. What is a normal value? normal The items are packed in their default position as if no justify-content value was set. This value behaves as stretch in grid and flex containers. I've seen other sites list it as flex-start. What is the default value? I might have answered my own question by looking at the spec: normal otherwise behaves as start. 回答1: You should pay attention because

问题 Specifically, I want to know, in the example below, why setting a height value to the first flex-item changes (actually increases) the height of the first row. Generally, I want to be able to determine the height of a row (I suppose when the height of the flex-container is set to auto or an explicit value). .flex-container { display: flex; flex-wrap: wrap; width: 400px; height: 200px; border: 1px solid black; align-items: stretch; } .flex-container> :nth-child(1) { background-color:

问题 This question already has answers here : “Height=100%” is not working in html when using <!DOCTYPE>? (3 answers) Why does height 100% work when DOCTYPE is removed? (5 answers) Closed 4 years ago . When I add the declaration at the top of my page my flexbox layout will collapse, when I remove the doctype it works as expected. Problem occurs in chrome/firefox/ie. .grid { height: 100%; display: flex; flex-flow: column nowrap; flex-grow: 1; border: 1px solid black; } .row { width: 100%; display:

问题 This question already has answers here : “Height=100%” is not working in html when using <!DOCTYPE>? (3 answers) Why does height 100% work when DOCTYPE is removed? (5 answers) Closed 4 years ago . When I add the declaration at the top of my page my flexbox layout will collapse, when I remove the doctype it works as expected. Problem occurs in chrome/firefox/ie. .grid { height: 100%; display: flex; flex-flow: column nowrap; flex-grow: 1; border: 1px solid black; } .row { width: 100%; display:

问题 This question already has answers here : “Height=100%” is not working in html when using <!DOCTYPE>? (3 answers) Why does height 100% work when DOCTYPE is removed? (5 answers) Closed 4 years ago . When I add the declaration at the top of my page my flexbox layout will collapse, when I remove the doctype it works as expected. Problem occurs in chrome/firefox/ie. .grid { height: 100%; display: flex; flex-flow: column nowrap; flex-grow: 1; border: 1px solid black; } .row { width: 100%; display:

问题 I am using Chrome 81, latest. I am including a <video> inside a <div> container which is set to flex-grow: 1. The idea is there is a header, and the bottom of the page fills to be the video, which will be contained the best possible. The strange problem is that when the window shrinks vertically and when the full picture size fits the window a scrollbar appears and grows until the size of the header is contained by the scrollbar. Once the header is contained in the scrollbar, the video also

问题 I am trying to build a video player in Bootstrap 4 using two columns, one containing the video, and the other containing rows with a thumbnail and title. The problem I am having is that the rows are not filling the vertical space of their parent column. What is the correct way to use flexbox helper classes to create a right column that will fill the vertical space regardless of how few items there are? or is there a more efficient way to do this in Bootstrap 4 ? This is the desired layout I