web-dev-qa-db-ja.com

flexプロパティがIE

なぜflexboxがIE 11。

テストのために、CodePenから非常にシンプルなflexbox=レイアウトを入手し、以下の情報を貼り付けました。

Chromeは意図したとおりに機能します。 IE11は失敗します。

Chromeで実行されているレイアウト成功の画像：

enter image description here

IE11のレイアウト障害の画像

enter image description here

body {
  background: #333;
  font-family: helvetica;
  font-weight: bold;
  font-size: 1.7rem;
}

ul {
  list-style: none;
}

li {
  background: hotpink;
  height: 200px;
  text-align: center;
  border: 2px solid seashell;
  color: seashell;
  margin: 10px;
  flex: auto;
  min-width: 120px;
  max-width: 180px;
}

.flex {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
<ul class="flex">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

http://codepen.io/hankthewhale/pen/IdKkB?editors=11

htmlcsscss3flexboxinternet-explorer-11
19
Dizz

IEはflexプロパティの解析に問題があります。

ここに私のために働いたいくつかの回避策があります：

  • ショートハンドの代わりにロングハンドプロパティを使用します。

    このようなものの代わりに：flex: 0 0 35%。

    これを試して：

    • flex-grow: 0
    • flex-shrink: 0
    • flex-basis: 35%

  • flex-basisでパーセント値と単位なしの値に注意

    これは、IE11のバージョンに依存する場合があります。動作は異なるようです。

    これらのバリエーションを試してください：

    • flex: 1 1 0
    • flex: 1 1 0px
    • flex: 1 1 0%

注意してください！特定のcssミニファイヤは、0pxを0に置き換えます。何らかの理由で0%は変更されません）。

詳細はこちら：

  • flex: 1の代わりにflex: autoを使用（またはflex-basis: autoを追加）

    flex: 1でflex-direction: row（大画面など）を使用していて、メディアクエリでflex-direction: columnに切り替えた場合（モバイルデバイスの場合）、フレックスアイテムが折りたたまれます。

    メディアクエリにflex-basis: autoを追加します。これは、flex-basisルールのflex: 1値（通常、ブラウザーに応じて0、0px、または0%）をオーバーライドします。

    flex: autoを使用しても機能するはずです。

    • flex-grow: 1
    • flex-shrink: 1
    • flex-basis: auto
  • widthではなく、昔ながらのheight/flexプロパティを使用します。

  • blockレイアウトの代わりにflexレイアウトを使用します。

    フレックスレイアウトを完全に放棄する必要はありません。ただし、特定のコンテナでは、display: blockの代わりにdisplay: flex; flex-direction: columnを使用してジョブを実行できる場合があります。

    たとえば、 padding trick を使用してフレックスアイテムにビデオをレスポンシブに埋め込む必要がある場合、私が直面した障害は 一部のブラウザはパーセントパディング（またはマージン）でうまく機能しない）フレックスコンテナ内 。

    これを機能させるために、フレックスアイテムのdisplay値を以下から切り替えました。

    /* a flex item, also a nested flex container */
#footer-container > article {
    display: flex;
    flex-direction: column;
}

    これに：

    #footer-container > article {
    display: block;
}
41
Michael_B

私にとっては

  flex: 1 1 auto;

の代わりに

  flex: 1;

IE 11。

7
Embedded_Mugs

flex:1 0 auto;を使用してください。それが動作します。

0
akshay kanyan