This question concerns a browser with full css3 support including flexbox. I have a flex container with some items in it. They are all justified to flex-start but I want the last .end item to be justified to flex-end. Is there a good way to do this without modifying the HTML and without resorting to … Read more
Consider the following snippet: .parent { display: flex; flex-direction: column; width: 400px; border: 1px solid red; align-items: center; } .child { border: 1px solid blue; } <div class=”parent”> <div class=”child”> Lorem Ipsum is simply dummy text of the printing and typesetting industry </div> <div class=”child”> Lorem Ipsum is simply dummy text of the printing and … Read more
I need to implement a masonry layout. However, for a number of reasons I don’t want to use JavaScript to do it. Parameters: All elements have the same width Elements have a height that cannot be calculated server side (an image plus various amounts of text) I can live with a fixed number of columns … Read more
This question already has answers here: How to specify line breaks in a multi-line flexbox layout? (9 answers) Closed 3 years ago. I don’t think this is part of the flexbox standard yet, but is there maybe a trick to suggest or force wrapping after a certain element? I’d like to respond to different page … Read more
As we all know, the flex property is a shorthand for the flex-grow, flex-shrink, and the flex-basis properties. Its default value is 0 1 auto, which means flex-grow: 0; flex-shrink: 1; flex-basis: auto; but I’ve noticed, in many places flex: 1 is used. Is it shorthand for 1 1 auto or 1 0 auto? I … Read more
I am working on a nested flexbox layout which should work as follows: The outermost level (ul#main) is a horizontal list that must expand to the right when more items are added to it. If it grows too big, there should be a horizontal scroll bar. #main { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: … Read more
I have a left-right flexbox: .wrapper { display: flex; flex-direction: row; align-items: stretch; width: 100%; height: 70vh; min-height: 325px; max-height:570px; } <div class=”wrapper”> <div class=”left”>Left</div> <div class=”right”>Right</div> </div> The problem is that the right child is not behaving responsively. To be specific, I want it to fill the height of the wrapper. How to accomplish … Read more
Flexbox has this behaviour where it stretches images to their natural height. In other words, if I have a flexbox container with a child image, and I resize the width of that image, the height doesn’t resize at all and the image gets stretched. div { display: flex; flex-wrap: wrap; } img { width: 50% … Read more
I tried to style a fieldset element with display: flex and display: inline-flex. However, it didn’t work: flex behaved like block, and inline-flex behaved like inline-block. This happens both on Firefox and Chrome, but strangely it works on IE. Is it a bug? I couldn’t find that fieldset should have any special behavior, neither in … Read more
CodePen: http://codepen.io/anon/pen/RPNpaP. I want the red box to be only 25 em wide when it’s in the side-by-side view – I’m trying to achieve this by setting the CSS inside this media query: @media all and (min-width: 811px) {…} to: .flexbox .red { width: 25em; } But when I do that, this happens: View post … Read more
