Hacker News new | ask | show | jobs
by Tomte 3791 days ago
I haven't found a way to handle <aside> with Flexbox.

Intended behaviour is that you're writing paragraphs of <p>, then a <p> that you wish to annotate, then the <aside>, then some more <p>.

The aside should be, well, on the side. In the margin.

So far, with floating <aside> you need to have the <aside> before the <p> that it belongs to, which is semantically false.

I had hopes with Flexbox to finally solve this issue, but it doesn't look possible, because if you imagine it as a big grid of two columns, the text would have to flow through only the left column, while only the <aside> would have to be pushed to the right column.

3 comments

Is this what you're looking to do?

https://jsfiddle.net/sadz6va6/

Disclaimer: New to flexbox myself. Might have committed some sins.

Yes. Thank you (also to the sibling commenters).
Nicely done.
If you use margin: auto on an element inside a flex container (for example margin-left:auto to float right), you can position a floated element in correct content order.
Wouldn't row-reverse fix that?