Help us understand the problem. What is going on with this article?

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

More than 5 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:

st44100
lie付 Hacker : 家宝はThe Avalanches - Since I Left You オリジナル豪盤
cyberagent
サイバーエージェントは「21世紀を代表する会社を創る」をビジョンに掲げ、インターネットテレビ局「AbemaTV」の運営や国内トップシェアを誇るインターネット広告事業を展開しています。インターネット産業の変化に合わせ新規事業を生み出しながら事業拡大を続けています。
http://www.cyberagent.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away