Hey there! Let's dig into why your flexbox vertical alignment isn't behaving as expected in Chrome 63 on Ubuntu 16.04. Given your environment, there are a few key culprits to check:

Common Causes & Fixes #

1. Your Flex Container Lacks a Defined Height #

This is the most frequent issue with flex vertical alignment. Flexbox uses the container's height to distribute space for alignment—if your container only has the height of its content (no explicit height set), align-items: center (or other vertical alignment properties) won't have any space to work with.

Fix: Add an explicit height to your flex container. For example, to make it take the full viewport height:

.flex-container {
  display: flex;
  align-items: center; /* Vertical alignment */
  height: 100vh; /* Make container full viewport height */
}

2. Missing WebKit Prefixes for Older Chrome #

Chrome 63 (released in late 2017) is an older version that still required vendor prefixes for some flexbox properties in edge cases. Even though standard flex syntax was widely supported, some combinations might have needed -webkit- prefixes to work correctly.

Fix: Add prefixes to your flex-related properties:

.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  height: 100vh;
}

3. Known Flexbox Bugs in Chrome 63 #

Older Chrome versions had specific flexbox bugs that could break vertical alignment:

• Min-height/max-height handling: Chrome 63 had issues calculating flex container height when using min-height instead of a fixed height. Try replacing min-height with a fixed height to test.
• Inline-flex quirks: If you're using display: inline-flex, vertical alignment might behave unexpectedly due to inline layout interactions. Switch to display: flex if you don't need inline behavior.
• Nested flex containers: Nested flex structures sometimes had incorrect property inheritance in this version. Double-check that each flex container has its alignment properties explicitly set.

4. Forgot to Set the Parent as a Flex Container #

It sounds obvious, but it's easy to miss: if you didn't add display: flex (or -webkit-flex) to the parent container, none of the child alignment properties will work. Flexbox only affects direct children of a flex container.

Fix: Verify that the parent element of your boxes has display: flex (with prefix if needed) applied.

Quick Troubleshooting Steps #

1. Compare your code line-by-line with the MDN example to ensure no properties are missing.
2. Check Chrome DevTools (F12) to confirm your flex container has the correct height and flex properties applied (look for any strikethrough properties that might be overridden).
3. Test with a minimal, stripped-down version of the MDN example to rule out conflicting CSS from other parts of your code.

内容的提问来源于stack exchange，提问作者TMOTTM