Nekorin
KPCKevin Powell - Community
•Created by reeee on 7/2/2024 in #front-end
i have a container that contains 6 items and i want 3 items of the exact same size in each row
Flexbox can work multiple rows with flex-wrap: wrap;
It is good when you need the 2nd row item being at a specific position when the row isn't filled fully. (like a 3 item per row setup but the last row only have 2 items being centralized).
Example where flexbox is preferred over grid (imo). A grid of logos where each logo is of different widths, and have to centralize the last row.
----------
If all items are of the same width, like a group of cards for instance, Grid offers more flexibility over flexbox, it can even help with vertical alignment of the elements within the card itself too.
28 replies
KPCKevin Powell - Community
•Created by Nekorin on 7/2/2024 in #front-end
Any ideas on how to create a double border chamfer with transparent background?
Wow this looks so clean. And it works in various widths, without resorting to using resizeObserver to resize the buttons unlike mine.
7 replies
KPCKevin Powell - Community
•Created by Nekorin on 7/2/2024 in #front-end
Any ideas on how to create a double border chamfer with transparent background?
End up using JS code to draw svg on button elements. If only this is doable in pure html/css...
https://codepen.io/nekorin/pen/GRaVjXq
7 replies
KPCKevin Powell - Community
•Created by Nekorin on 7/2/2024 in #front-end
Any ideas on how to create a double border chamfer with transparent background?
The problem there is no way to do cut corners without using clip-path. And clip-path doesn't really give a "border" to work with.
Found this polygon border with CSS Paint API though, but the API is still experimental, not for production.
https://css-tricks.com/exploring-the-css-paint-api-polygon-border/
7 replies