The accepted answer is not ideal for the use of flex properties, because it can all be done without the need for min-height or max-height I’ve cleaned up the example fiddle and removed non-essential css styles to show which flex properties are being used here. In order to get evenly spaced top/bottom divs, you need … Read more
justify-content is not a transition-able property. You can find the full list of compatible properties here. All unlisted properties should simply snap to their new value. If you happen to need to animate a single element only, you may try using absolute positioning. #wrapper { position: relative; } #element { position: absolute; left: 50%; transform: … Read more
The container actually is 100% wide, i.e. spans the full width of the window. But with the default flex settings, its children will simply align left and will be only as wide as their contents. However, if you apply flex-grow: 1; to the child elements to allow them to get wider, they will stretch and … Read more
You need to use max-width instead of width on the container, you have to allow the container to shrink for the items to wrap. body { font-family: arial; } p { color: white; } .container { background-color: #666; max-width: 800px; height: 200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; } .item { padding: … Read more
Instead of using justify-content: space-around, use auto margins on the items. By giving each flex item margin-right: auto, container space will be distributed evenly between items (like justify-content), but the first item will remain at the left border edge. flex-container[one] { display: flex; justify-content: space-around; border: 1px dashed green; } flex-container[one]>flex-item { background-color: lightgreen; } … Read more
I don’t know if it’s ok for you, but I think it can be done mostly in css if you allow a little bit more HTML. Consider the following html <div class=”outerContainer”> <div class=”canvasContainer”> <canvas width=”640″ height=”360″></canvas> </div> <div class=”beside”> </div> </div> I just added a little div around the canvas. This way we let … Read more
Having looked into this for a bit now, I’m still not sure what about Firefox causes printing flex containers to be cut off. I found some extremely old bug reports on Bugzilla (eg. https://bugzilla.mozilla.org/show_bug.cgi?id=258397), but they had something to do with overflow properties on the body tag. Unfortunately, trying to adjust the overflow of body … Read more
The easiest fix is to override the entire behavior with an attribute selector. No document changes needed: [hidden]{ display:none; } http://jsfiddle.net/mjxcrrve/ I am guessing the logic behind the default behavior is to allow overriding the “hidden” html attribute with CSS. “hidden” is more or less an implicit “display: none”, so overriding the “display” style is … Read more
No, not without media queries adjusting the flex-basis value. Flex items that stretch and wrap attempt to maximize the amount of items that fit on each row. You may want to consider using the multi-column module instead, which will attempt to equally distribute elements across all of the columns created: .foo { columns: 100px; } … Read more