Posted at

Chrome 41だとflex justify-content: centerを上書きしてspace-betweenとかすると始点がおかしくなる。

More than 3 years have passed since last update.

↓みたいな感じで、ベースのクラスにjustify-content:centerつけてるけど、一部space-betweenにしたいんだよねって時に

.flex-base {

color: #fff;
display: flex;
margin: 15px auto 0;
justify-content: center;
}

.flex--justify {
justify-content: space-between;
}

  <div class="flex-base flex--justify">

<div class="flex__item">A</div>
<div class="flex__item">B</div>
</div>

DEMO:

http://codepen.io/st44100/pen/ZYmbgj

↓Chrome 41だと崩れる。

chrome41.png

↓Chrome 43だとOK

Chrome_canary.png

↓Vivaldiもついでに崩れてる。

Vivaldi.png

↓ Safari 7.1.3

safari.png

↓Firefox 36

firefox.png

Stack overflow探すと案の定

http://stackoverflow.com/questions/28203658/chrome-not-properly-overriding-justify-content-for-flex-box/28204601#28204601

Chrome 42ではなおるから安心してだって

つらい・・・ :cry: