Show HN: Struggle with CSS Flexbox? This Playground Is for You

Post by insin » Sun, Jan 05, 2025, 12:50 PM UTC

vishnuharidas wrote: post #18

Why did they name those props `justify-content` and `align-items` instead of `main-axis-arrangement` and `cross-axis-alignment` which makes more sense?

    const plugin = require('tailwindcss/plugin')

    const aliasFlexboxAlignment = plugin(function({ addUtilities }) {
      addUtilities({
        '.cross-axis-baseline': { 'align-items': 'baseline' },
        '.cross-axis-center': { 'align-items': 'center' },
        '.cross-axis-end': { 'align-items': 'flex-end' },
        '.cross-axis-start': { 'align-items': 'flex-start' },
        '.cross-axis-stretch': { 'align-items': 'stretch' },
        '.main-axis-around': { 'justify-content': 'space-around' },
        '.main-axis-between': { 'justify-content': 'space-between' },
        '.main-axis-center': { 'justify-content': 'center' },
        '.main-axis-end': { 'justify-content': 'flex-end' },
        '.main-axis-evenly': { 'justify-content': 'space-evenly' },
        '.main-axis-normal': { 'justify-content': 'normal' },
        '.main-axis-start': { 'justify-content': 'flex-start' },
      })
    })

Post by jbeninger » Sun, Jan 05, 2025, 1:21 PM UTC

insin wrote: post #21

philippta wrote: post #10

I never struggle with flexbox itself. But getting a flexbox right in which the content overflows is always a mystery to me. If anyone has a guide or spec how overflow rules apply in CSS, please share.

Every time I re-encounter this, I end up re-learning that min-width on flex items defaults to 'auto' and min-width: 0; is the secret sauce. e.g. I recently made a component representing an attached file, where the flex items in its layout were: [icon] [filename] [button] To get long filenames to not force their container to the full length of the string, so they could be truncated by text-overflow: ellipsis, I needed…

Post by sureIy » Sun, Jan 05, 2025, 1:30 PM UTC

freetonik wrote: post #20

vishnuharidas wrote: post #18

Why did they name those props `justify-content` and `align-items` instead of `main-axis-arrangement` and `cross-axis-alignment` which makes more sense?

There is probably some explanation, but in general, I find many CSS properties confusing and unintuitive: `color`, `text-align`, `position: absolute` vs `position: fixed` (absolute is still technically relative!), etc.

Post by rererereferred » Sun, Jan 05, 2025, 1:48 PM UTC

vishnuharidas wrote: post #18

Why did they name those props `justify-content` and `align-items` instead of `main-axis-arrangement` and `cross-axis-alignment` which makes more sense?

Post by rererereferred » Sun, Jan 05, 2025, 2:07 PM UTC

vishnuharidas wrote: post #24

sod wrote: post #23

Earlier quoted context omitted.

I didn't confuse it since I use the mnemonic "formatting text to “justify” is horizontal in my language". Sure you can change that. But that covers the flex default behavior.

But when the `flex-direction` is `column`, `justify-content` becomes synonymous for "vertical alignment" - that's what creates the confusion here.