flexbox

问题 This is a similar question to Can you make a flexbox child expand to fit parent but not contents? , however, that solution doesn't work for me. I have a layout such that the whole page should always fit on screen (between header and footer), and if contents is too large, then its container should scroll. (Basically the last example from: https://css-tricks.com/snippets/css/a-guide-to-flexbox/) I already tried the solution from the question I linked above: #chat { background-color: #ceecf5;

问题 This question already has answers here : Targeting flex items on the last or specific row (3 answers) Closed 2 years ago . We have flex container with 2 child elements. When we resize window, and one of flex item wraps, we have each element on its own row. Is it any selector like :when-alone-in-row ? .flex-parent {flex-flow: row wrap} .flex-child .flex-child 回答1: No, there is no selector similar to :when-alone-in-row . However, when you want to select the first and last elements from a group

问题 I have a grid with some items, and when I click any item I move the content of that item to a modal. The modal works great, but when I remove the content from the item, a space appears above the item. I know that a way around this problem could be using a flexbox, which works fine, but I want to understand what is going on here. Something that could be key here is that each item has 3 children. I use position: absolute in two of them, and the other one stays with the default position. If I

问题 This question already has an answer here : Make flex items take content width, not width of parent container (1 answer) Closed 2 years ago . I would like to have the flex children rendered inline-block so that border-bottom is under the li 's width instead of the container's width. Apparently flex children can't be set as inline-block? Is there a workaround to this problem? .menu { display: flex; flex-flow: column; list-style: none; padding: 0; } .menu > li { display: inline-block; margin

问题 In this codepen example: http://codepen.io/DrYSG/pen/ovctn I created three flexboxes. The effect I want is that when one hovers over the middle box, it grows in size (color change in the demo is just to help me know about the hover). In FireFox v19 this almost works correctly. But it is strange what it picks of the start and end widths of the animation. In Chrome v25, I am getting rapid unstable oscillation of states (flashing). Really not correct. In IE10 I get the same transition as FireFox

问题 I'm trying to create a progress bar with an animation. It works if I don't have inner text but as soon as I add the inner text the width calculations are different for some reason. I've tried working with the different width() functions and I've tried adding up each segment but every time the text throws off the width for some reason. Here's what I have - JSFiddle /** Progress Bar Animation **/ function animate_progress_bar() { if (!$('.progressBar').length) { return false; } $('.progressBar'

问题 When scrolling down the .parent div you should see its red background at the bottom due to the padding-bottom . This works in Chrome, but not in Safari and Firefox. .container { display: flex; width: 200px; height: 500px; } .parent { display: flex; flex-direction: column; background: red; padding-top: 20px; padding-bottom: 20px; overflow: auto; flex: 1; } .child { flex: 1 0 100px; background: green; border: 1px solid blue; } <div class="container"> <div class="parent"> <div class="child">

问题 I'm having a problem with some functionality of flexboxes in Firefox. I'm trying to maintain the aspect ratio of divs inside flexboxes using padding-bottom as a % of the parent and it works absolutely fine in Chrome, Opera, and IE. The sticking point is in Firefox, where the whole thing seems to break down. The test-wrap is't getting a height as it should. Is this simply an edge-case bug that I should submit to Mozilla or is there a solution to this that I can do with CSS/HTML? We had

问题 Without modifying the HTML or using some position: absolute hackery, is it possible to make items 6 and 7 in this list appear side-by-side on row 6? ul { border: 1px solid gray; display: flex; flex-direction: column; justify-content: center; align-items: center; list-style-type: none; } li { width: 33%; border: 1px solid #ccc; text-align: center; } <div class="flex-container"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> </div> https://jsfiddle.net

问题 I need to center a div in flex container with keeping the height of the whole container for that div. Obviously, I have align-items:stretch for keeping a height or align-items:center for centering block. What is a good approach for flexbox model to center a div with keeping height of the parent container? JSFiddle: http://jsfiddle.net/symb8s02/ 回答1: You could wrap the text node with a span element and then set the display of .child2 to flex and add align-self: center to the child span element