Add a ::after which autofills the space. No need to pollute your HTML. Here is a codepen showing it: http://codepen.io/DanAndreasson/pen/ZQXLXj .grid { display: flex; flex-flow: row wrap; justify-content: space-between; } .grid::after { content: “”; flex: auto; }
Instead of using align-self: center use align-items: center. There’s no need to change flex-direction or use text-align. Here’s your code, with one adjustment, to make it all work: ul { height: 100%; } li { display: flex; justify-content: center; /* align-self: center; <—- REMOVE */ align-items: center; /* <—- NEW */ background: silver; width: 100%; … Read more
You can use auto margins Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension. So you can use one of these (or both): p { margin-bottom: auto; } /* Push following elements to the bottom */ a { margin-top: auto; } /* Push it and … Read more
The align-items property of flex-box aligns the items inside a flex container along the cross axis just like justify-content does along the main axis. (For the default flex-direction: row the cross axis corresponds to vertical and the main axis corresponds to horizontal. With flex-direction: column those two are interchanged respectively). Here’s an example of how … Read more
Use align-items: stretch Similar to David Storey’s answer, my workaround is: .flex-2 { display: flex; align-items: stretch; } Note that height: 100% should be removed from the child component (see comments). Alternatively to align-items, you can use align-self just on the .flex-2-child item you want stretched.
I think you want something like the following. html, body { height: 100%; } body { margin: 0; } .flex-container { height: 100%; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; } .row { width: auto; border: 1px solid blue; } .flex-item { background-color: tomato; padding: 5px; width: 20px; height: 20px; margin: 10px; … Read more
A more flex approach would be to use an auto left margin (flex items treat auto margins a bit differently than when used in a block formatting context). .c { margin-left: auto; } Updated fiddle: .main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; … Read more
Methods for Aligning Flex Items along the Main Axis As stated in the question: To align flex items along the main axis there is one property: justify-content To align flex items along the cross axis there are three properties: align-content, align-items and align-self. The question then asks: Why are there no justify-items and justify-self properties? … Read more
Alternatively, you should now use flexbox to achieve many of the layouts that you may previously have used inline-block for: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Since this answer has become rather popular, I’m rewriting it significantly. Let’s not forget the actual question that was asked: How to remove the space between inline-block elements? I was hoping for a CSS … Read more
Flexbox doesn’t have collapsing margins. Flexbox doesn’t have anything akin to border-spacing for tables (edit: CSS property gap fulfills this role in newer browsers, Can I use) Therefore achieving what you are asking for is a bit more difficult. In my experience, the “cleanest” way that doesn’t use :first-child/:last-child and works without any modification on … Read more