[TW5] Playing with flex box

[Jed Carty]

I am not sure how much this is going to be useful, but when answering a question in another thread I had a reason to finally use the display:inline-flex option in css. Someone else has probably pointed this out before, but it plays well with list widgets. I think it has a lot of potential for tiddlywiki, particularly for creating dynamic lists that aren't purely text, like image thumbnails.

Put this in a tiddler on tiddlywiki.com to see one thing you can do, it shows all the core images and below that it shows the tags and the list will rearrange itself if you change the tiddler width so that it tries to take up the full width.

<div style='text-align:center'>

<$list filter='[all[shadows]prefix[$:/core/images/]]'>

<div style='display:inline-flex;text-align:center;border:solid 1px lightgrey;background-color:lightyellow;'>

<$link to=<<currentTiddler>>><$transclude/><br><$list filter='[<currentTiddler>removeprefix[$:/core/images/]]'><$view field='title'/></$list></$link>

<br>

</div>

</$list>

</div>

<div style='text-align:center'>

<$list filter='[all[]tags[]]'>

<div style='display:inline-flex;'>

<<tag>>

</div>

</$list>

</div>

I have tested this in firefox and safari and it hasn't given me any trouble, I don't know if there are any problems on chrome.

[Jed Carty]

Looking at this more I don't think it is at all profound. So feel free to ignore this.

[@TiddlyTweeter]

Jed,

Its maybe not so CSS new. But it still IS useful IMO.

The power of modern CSS I think is under-used in TW. Its understandable in a way as advanced CSS can become a frustrating PITA developing if you not an expert in it due to variant browser support. In that way it differs from normal TW macros et al which mostly work reliably ONE way (or don't :). But I'm convinced CSS is as important as everything else and easing ways to get good at it in TW is one  important way forward.

Explicit examples like you presented are very helpful, I think.

Just my 2 centesimo,
Josiah