Recent searches

No recent searches

Search options

Only available when logged in.
eupolicy.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
This Mastodon server is a friendly and respectful discussion space for people working in areas related to EU policy. When you request to create an account, please tell us something about you.

Administered by:

Server stats:

196
active users

eupolicy.social: AboutProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.4.3

#flexbox

0 posts0 participants0 posts today
Pierre Huyghebaert<p>On the article referenced in <a href="https://mastodon.design/@julieblanc/114898215638090915" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">mastodon.design/@julieblanc/11</span><span class="invisible">4898215638090915</span></a>, <span class="h-card" translate="no"><a href="https://mastodon.design/@julieblanc" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>julieblanc</span></a></span> quoted a <a href="https://post.lurk.org/tags/TAG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>TAG</span></a> commentary <br>"Overall, we think <a href="https://post.lurk.org/tags/Masonry" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Masonry</span></a>, <a href="https://post.lurk.org/tags/Grid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Grid</span></a>, and wrapping <a href="https://post.lurk.org/tags/Flexbox" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Flexbox</span></a> should be incorporated into a unified set of properties. <a href="https://post.lurk.org/tags/Chrome" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Chrome</span></a>’s [New Masonry Layout] proposal splits apart property sets too eagerly, but even the <a href="https://post.lurk.org/tags/WebKit" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebKit</span></a> [using CSS Grid] proposal seems to miss a chance to develop more-general properties. (…) <a href="https://post.lurk.org/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> currently has 3 layout modes (…): Grid, Multicol, and wrapping Flexbox. This is already causing a lot of author confusion, and Masonry attempts to add a 4th mode. As a general principle, having vastly different ways to accomplish slightly different things is a usability <a href="https://post.lurk.org/tags/antipattern" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>antipattern</span></a>. We urge the [CSS] W[orking] G[group] to explore ways to unify these so that authors can port more knowledge from one to the other (even if they are implemented as separate code paths internally). (Issue #1003 on w3ctag/design-reviews, comment on Nov 20, 2024, by <a href="https://post.lurk.org/tags/JeffreyYasskin" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JeffreyYasskin</span></a> /@jyasskin)</p>
Frontend Dogma<p>Masonry, Item Flow, and… GULP?, by <span class="h-card" translate="no"><a href="https://mastodon.social/@Meyerweb" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>Meyerweb</span></a></span>:</p><p><a href="https://meyerweb.com/eric/thoughts/2025/05/21/masonry-item-flow-and-gulp/?_bhlid=4416223e6b626c5e6bbfef00ce9ad47789aa40e3" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">meyerweb.com/eric/thoughts/202</span><span class="invisible">5/05/21/masonry-item-flow-and-gulp/?_bhlid=4416223e6b626c5e6bbfef00ce9ad47789aa40e3</span></a></p><p><a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://mas.to/tags/masonry" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>masonry</span></a> <a href="https://mas.to/tags/flexbox" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>flexbox</span></a> <a href="https://mas.to/tags/grids" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>grids</span></a> <a href="https://mas.to/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a></p>
Matti Järvinen<p>Pretty happy how my HTML DM screen pages turned out and are even printable. Here's the last page.</p><p>CSS border-image-source and slices used with the box border ( not your 00's average borders anymore ).</p><p>Note: CSS mix-blend-mode: multiply used on the AI illustration (I suck at drawing) to let the white pass through as transparent to get a look it's painted on top of the paper.</p><p>Works 👍 on both A4 and Letter size. </p><p><a href="https://mastodon.social/tags/DnD" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DnD</span></a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/FlexBox" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FlexBox</span></a> <a href="https://mastodon.social/tags/AI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>AI</span></a></p>
Revath S Kumar :javascript:<p>Hope <a href="https://fosstodon.org/tags/tailwindcss" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tailwindcss</span></a> support <a href="https://fosstodon.org/tags/flexbox" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>flexbox</span></a> safe alignment utilities soon.</p>
Aral Balkan<p>Laura’s* Penpot** session, Introduction to Flex and Grid Layout, will be live streamed via Peertube tomorrow from 2-3 PM UTC at <a href="https://peertube.kaleidos.net/w/g5F9Se2PK2934EFrLSuJ16" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">peertube.kaleidos.net/w/g5F9Se</span><span class="invisible">2PK2934EFrLSuJ16</span></a></p><p>* <span class="h-card" translate="no"><a href="https://mastodon.laurakalbag.com/@laura" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>laura</span></a></span> <br>** <span class="h-card" translate="no"><a href="https://fosstodon.org/@penpot" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>penpot</span></a></span> </p><p><a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/design" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>design</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.ar.al/tags/FOSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FOSS</span></a> <a href="https://mastodon.ar.al/tags/grid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>grid</span></a> <a href="https://mastodon.ar.al/tags/flexBox" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>flexBox</span></a> <a href="https://mastodon.ar.al/tags/PenPot" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>PenPot</span></a></p>
James Smith 💾<p><a href="https://mastodon.me.uk/tags/Flexbox" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Flexbox</span></a> question: I've got two columns. Column 1 should expand to fit in whatever the page content is, like a normal div. Column 2 might have *longer* content, but I want it to shrink down vertically to match the height of column 1, and then Y scroll for overflow. Can that be done?</p>
TrendingLive feeds
About