概要
ボックスレイアウトを簡単に実装できるCSSプロパティflexをIE10などのレガシーブラウザでも対応させる方法。用途
- 簡単に横並びレイアウトが実装できるflexをIE10にも対応させる
- CSSプロパティーのflexを利用
検証ブラウザ
- Microsoft Edge(最新)
- IE11
- IE10
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
実装方法
HTML
<div class="c-block">
<div class="c-block__elem">短いテキスト</div>
<div class="c-block__elem">長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト</div>
<div class="c-block__elem">
<div class="c-block__box">
<img src="https://konocode.jp/img/common/dummy_200_200.png" alt="200x200">
</div>
</div>
</div>
SCSS（mixin）
@mixin flex($content: 'start', $wrap: null, $align: null) {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
@if $content == 'start' {
-webkit-box-pack: start;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
@else if $content == 'justify' {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
@else if $content == 'center' {
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
@else if $content == 'end' {
-webkit-box-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
@if $wrap != null {
@if $wrap == 'nowrap' {}
}
@else {
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
@if $align != null {
@if $align == 'start' {
-webkit-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
@if $align == 'center' {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
@if $align == 'end' {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: flex-end;
align-items: flex-end;
}
}
@else {}
}
CSS
.c-block {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.c-block__elem {
width: 30%;
}
.c-block__elem img {
width: 100%;
}
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
