IE10 以上 対応 flex で整列

[ ID : 432 ]
IE10 以上 対応 flex で整列

概要

ボックスレイアウトを簡単に実装できる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%;
}

この記事をシェアする

新着記事

全ての記事を見る

KONOCODEのメリット 無料会員登録