Not sure what kind of centering you want do So a few options: Option 1: just center the elements in .container add justify-content: center; to .container instead main { background-color: blue; width: 390px; display: flex; } .container { background-color: red; display: flex; flex-wrap: wrap; justify-content:center; } .a1 { color: grey; width: 100px; height: 200px; background-color: …
flex-grow is animatable but only if the value is a <number>. However it seems that Google Chrome (v41) doesn’t trigger the animation if the value is set to 0. A workaround for this could be to use a very small value instead — something like 0.0001: Updated example. $(“.item”).click(function() { $(“.item”).addClass(“collapse”); $(this).removeClass(“collapse”); }); html, body …
Per a comment on bugs.webkit.org, it seems the solution is simple! If your style is div.flex { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; flex-direction: row; } div.flex .item { min-width: 15em; -webkit-flex: 1; flex: 1; } you just need to add more explicitness to your flex declaration. In fact, I think …
Try add to .author margin-top: auto; You also need to remove flex-end.
Instead of setting width in % on right column you can just use flex: 1 and it will take rest of free width in a row. .flex_container { display: flex; width: 100%; } .flex_item_left { width: 200px; background: lightgreen; } .flex_item_right { flex: 1; background: lightblue; } <div class=”flex_container”> <div class=”flex_item_left”> ….. </div> <div class=”flex_item_right”> …
align-self: flex-end; only goes “column”, in your case you have two options: justify-content: space-between; on .container, fiddle remove the align-self on both elements and use margin-left: auto; on .b, fiddle .container { border: 2px solid; height: 500px; display: flex; flex-direction: row; justify-content: space-between; } .box { border: 1px solid; height: 200px; width: 50px; } .a …
I would use javascript or jquery to achieve this. My approach would be: get the offsetTop of the element using :first-of-type selector. use the each method of jquery to run through all elements and compare if offsetTop of $(this) is different of the offsetTop value you got on step1. gotcha Provide some code if you …
Flexbox make items same height as you can see here Demo , but you can use align-items to change that or in your case Demo .parent { align-items: center; display: flex; } .child { border: 1px solid black; margin: 5px; } .child:first-child { height: 100px; } <div class=”parent”> <div class=”child”>Child</div> <div class=”child”>Child</div> </div>
You might be looking for the display: inline-flex property. It treats its children just like the display: flex property, except it itself does not automatically grow.
Update in late 2021 Now the gap property also works with Flexbox (on newer browser versions). * { margin: 0; padding: 0; } html, body { box-sizing: border-box; } .container { width: 600px; margin: 0 auto; margin-top: 25px; border: 1px solid; padding: 5px; } .tags { list-style-type: none; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: …