I've been working with Flexbox for layout, but I keep running into issues where items don't align as expected. Can anyone share a checklist of common mistakes?
Make sure you set flex-direction correctly. The default is row, which can cause unexpected wrapping if you haven't defined flex-wrap.
Also, check the align-items and justify-content values on the container.
Don't forget about min-width on the flex items. It can prevent them from shrinking below a certain size, breaking the layout.
I'm trying to animate custom properties in CSS. Is there a simple way to do this without JavaScript?
You can animate CSS variables using the @keyframes rule. Just define the variable on the element and change it inside the animation.
:root {
--accent: #0a6ed1;
}
.box {
background: var(--accent);
animation: colorShift 3s infinite;
}
@keyframes colorShift {
0% { --accent: #0a6ed1; }
50% { --accent: #ff5722; }
100% { --accent: #0a6ed1; }
}