Setting flex-wrap: wrap broke alignment set with align-items
Reported by
yavano...@yandex-team.ru,
Sep 13 2016
|
||
Issue descriptionUserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 YaBrowser/16.7.0.3265 (beta) Yowser/2.5 Safari/537.36 Example URL: https://jsfiddle.net/8a3r6tLf/ Steps to reproduce the problem: 1. Use two nodes container and child 2. Let container to have display: flex; align-items: center; justify-content: center; flex-wrap: wrap; What is the expected behavior? Child is positioned in the center of container element. What went wrong? In chrome 54.0.2840 align-items does not work with such properties combination and child element positioned in the top of container. Does it occur on multiple sites: Yes Is it a problem with a plugin? No Did this work before? Yes 53.0.2785 Does this work in other browsers? Yes Chrome version: 54.0.2840 Channel: dev OS Version: Flash Version: Shockwave Flash 22.0 r0
,
Sep 14 2016
I really wish comment 0 had included the full version number because this behavior changed during beta. Here is what's going on: The spec says that when flex-wrap: wrap is specified, we should not special-case things when there is in fact only one flex line. And when wrapping, flex lines shrink-wrap their contents (therefore, in a case like this with a single item in a flex line, align-items/align-self would not have an effect). You could use align-content: center. So in 54.0.2811.0 we changed our behavior to this new spec behavior described above in https://codereview.chromium.org/2191683003 However, this caused a number of issues, perhaps due to bugs in our implementation (I haven't found time to investigate) so I reverted the change for now in https://codereview.chromium.org/2289793003, for versions 54.0.2840.11 (or later) and 55.0.2847.0 (or later). As this is now reverted and back to the "expected" behavior, I'll close this bug, but you should keep in mind that the spec asks for wrapping flex containers to behave different from unwrapping ones. |
||
►
Sign in to add a comment |
||
Comment 1 by rtoy@chromium.org
, Sep 13 2016Components: -Blink Blink>Layout>Flexbox
Labels: Needs-Feedback