I found the solution: http://jsfiddle.net/sqp1wdap/3/ Align both Eye and Text to flex-start Make line-height for text same as Eye height Here is the edited code: .LegendItem_Eye { width: $slotWidth; display: flex; justify-content: center; align-items: flex-start; // ← edit (1) background: #eee; } .LegendItem_Text { padding: 0 3px; flex: 1; align-self: flex-start; // ← edit (1) … Read more
You can not do that. But you can get pretty close. Just set the grow on the flex item to a huge value (9999) and grow on the wrap item to 1 .flexContainer { display:flex; flex-wrap:wrap; border: 1px solid; } .img { width:110px; height:110px; background:red; } .flexItem { flex-basis:200px; flex-grow:9999; background:#ff1; } .wrapItem { flex-basis:100px; … Read more
The flex box spec has changed in the last few months and you are using the old syntax. The new spec I believe is only currently implemented only in Chrome Canary and to some extent in latest chrome. (It’s a little buggy) box-lines multiple is gone so to achieve this vertical layout there are a … Read more
Something like this? https://jsfiddle.net/wqLezyfe/2/ @media all and (max-width: 600px) { #wrapper{ flex-wrap:wrap; height: 100px; } .center { width: 100%; order: 3; } .left{ width: 50%; } .right{ width:50%; order:2; } }
It doesn’t make any sense to me, but adding -ms-flex: 0 1 auto or -ms-flex: 1 1 auto to the paragraph and aside corrects it in IE10. By default, elements are supposed to have flex: 0 1 auto applied to them when they become flex items. http://jsfiddle.net/pvJRK/3/
This seems to be a bug with Chrome. Similar to the ones reported here (issue 428049) and perhaps related to (issue 346275). This says: – Browsers are supposed to resolve percentages on the flex item’s child, *if* its flex-basis is definite. – Gecko is *always* resolving percentages regardless of the flex-basis. – Chrome is *never* … Read more
Short Analysis The problem is that rows 1-3 have two horizontal margins and row 4 only has one. With horizontal margins at 10px each, row 4 has 10px more free space than the other rows. This throws off the alignment of the columns. Because flex-grow applies only to free space, and is heavily influenced by … Read more
To center text over an image you don’t need flexbox. Just use CSS positioning properties. .height-100vh { height: 100vh; position: relative; /* establish nearest positioned ancestor for absolute positioning */ } .text { position: absolute; left: 50%; /* horizontal alignment */ top: 50%; /* vertical alignment */ transform: translate(-50%, -50%); /* precise centering; see link … Read more
With CSS grid you can use grid-column: span 2: .wrapper { display: grid; grid-gap: 0.5rem; grid-template-columns: 1fr 1fr 1fr; grid-auto-flow: dense; padding: 0.5rem; } .box { background-color: lightblue; padding: 0.5rem; } .a, .d, .e, .f { background-color: lightcoral; grid-column: span 2; /* <– here is the trick */ } <div class=”wrapper”> <div class=”box a”>A</div> <div … Read more
There are two primary ways to achieve this. Under each method you will find a working demo that you can expand to see how it behaves. Hovering over elements will give them a red border to make choosing the approach that works best for you easier. Parent-child border alignment You need to define the border … Read more