Balancing on a Pivot with Flexbox
Let me show you a way I recently discovered to center a bunch of elements around what I call the pivot. I promise you that funky HTML is out of the question and you won’t need to know any bleeding-edge CSS to get the job done.
[…]
[H]ere’s a sample of the HTML that drives this puzzle:
Here’s a generalized version of the [styles]. As you can see, it’s just 15 lines of simple CSS:
Code language: CSS
.puzzle .word {
display: flex;
}
.puzzle .word .letter:last-child {
margin-right: auto;
}
.puzzle .word .letter {
order: 2;
position: relative;
right: 50%;
}
.puzzle .word .pivot,
.puzzle .word .pivot ~ .letter {
order: 1;
left: 50%;
}