読者です 読者をやめる 読者になる 読者になる

Develop and Design Note

フロントエンドなデザイナーの覚書

display:flexにしたら、子要素の幅が何かおかしなことになった

CSS3のフレキシブルボックスが一昔前の「display:box」だったので最新仕様の「display:flex」に変えたら、えらい崩れてしまいました。

そもそも仕様は今どうなってるの?

floatを使ったカラムレイアウトに代わる、大変便利なプロパティ「フレキシブルボックス」ですが、仕様がころころ変わったことでも有名ですね。
いま現在、仕様がどうなっているのか、わかりやすい記事がありました。

要は、「display:flex」を使って実装するのが良さそうなのですが、単に「display:box」を「display:flex」に変えるだけだと、
子要素、つまりFlexアイテムと呼ばれる要素の横幅が減縮されてしまいます。

「display:box」を使って写真を横並びにしたカルーセル
f:id:designnote:20150201192501p:plain

「display:flex」に変えると、写真を内包するFlexアイテムの横幅が減縮されてしまう。
f:id:designnote:20150201192449p:plain

flex:0 0 auto」または「flex:none」で解決

この問題は、Flexアイテムとなる要素に、「flex:0 0 auto」または「flex:none」のプロパティを効かせることで解決しました。

詳細は、先ほど紹介した記事のflex(フレキシビリティ)の項目に書いてあるのですが、「display:flex」を使った場合、子要素の「flex」プロパティの初期値が「0 1 auto」になり、子要素の横幅が良い具合に減縮されるようです。

しかし、この「良い具合」が、今回のように「余計なお世話」になるケースがあるので、そういう場合は、「flex:0 0 auto」または「flex:none」をFlexアイテムに指定して、初期値を打ち消します。

Sass/Comapssのアップデートで@includeの値も更新

やや話はそれますが、このdisplay:flexの仕様によって、Compassの@includeの値が変わったので、そちらも備忘録として残しておきます。

なんかけっこうな変わり具合で、最初は戸惑いました^^;

一昔前のdisplay:box仕様 最新のdisplay:flex仕様
@include display-box; @include display-flex();
@include box-align(center); @include align-items(center);
@include box-align(start); @include align-items(flex-start);
@include box-align(end); @include align-items(flex-end);
@include box-pack(center); @include justify-content(center);
@include box-pack(start); @include justify-content(flex-start);
@include box-pack(end); @include justify-content(flex-end);
@include box-orient(horizontal); @include flex-direction(row);
@include box-orient(vertical); @include flex-direction(column);
@include box-flex(1); @include flex(1);
@include ordinal-group(1); @include order(1);