Consider the main axis and cross axis of a flex container: Source: W3C 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 align-self In the image above, the main axis is horizontal and the cross axis is … Read more
To set the minimal distance between flexbox items I’m using margin: 0 5px on .item and margin: 0 -5px on container. For me it seems like a hack, but I can’t find any better way to do this. #box { display: flex; width: 100px; margin: 0 -5px; } .item { background: gray; width: 50px; height: … Read more
Given this HTML and CSS: span { display:inline-block; width:100px; background-color:palevioletred; } <p> <span> Foo </span> <span> Bar </span> </p> As a result, there will be a 4 pixel wide space between the SPAN elements. Demo: http://jsfiddle.net/dGHFV/ I understand why this happens, and I also know that I could get rid of that space by removing the … Read more
