Bulma: Modern CSS framework based on Flexbox

Re:Bulma: Modern CSS framework based on Flexbox by Tomte on Sunday January 31, 2016 @03:40AM (#11005756)

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.

[ Parent | on HN ]

Re:Bulma: Modern CSS framework based on Flexbox by antsar on Sunday January 31, 2016 @11:03AM (#11006756)

Is this what you're looking to do?

https://jsfiddle.net/sadz6va6/

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

[ Parent | on HN ]

Re:Bulma: Modern CSS framework based on Flexbox by Tomte on Sunday January 31, 2016 @11:40AM (#11006887)

Yes. Thank you (also to the sibling commenters).

[ Parent | on HN ]

Re:Bulma: Modern CSS framework based on Flexbox by qwyxzy on Sunday January 31, 2016 @12:21PM (#11007041)

Nicely done.

[ Parent | on HN ]

Re:Bulma: Modern CSS framework based on Flexbox by jlukic on Sunday January 31, 2016 @10:27AM (#11006655)

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.

[ Parent | on HN ]

Re:Bulma: Modern CSS framework based on Flexbox by nailer on Sunday January 31, 2016 @06:20AM (#11006057)

Wouldn't row-reverse fix that?

[ Parent | on HN ]