web-dev-qa-db-ja.com

フレックスアイテムの「表示」プロパティをリセットする方法

古いブラウザ（具体的にはIE8、IE9、およびFlexbox 10+）のテーブルを保持することにより、下位互換性を備えた、テーブルとJSに基づく古いレイアウトを新しいOperaに変換しようとしています。

問題は、display:flex-itemの古いスタイルをオーバーライドするdisplay:table-cellがないことです。

display:inherit、display:initialなどのさまざまな定義を試しましたが、表示定義をリセットしてflex-itemとして正しく機能するものはありません。

<!-- HTML user list -->
<div class="userDetails layout">
    <div class="picture"><img src="..."></div>
    <div class="details">username, email, etc.</div>
</div>

/* CSS Table Layout */
.layout { display: table; width: 100%; }
.layout > .picture { display: table-cell; width: 30%; }
.layout > .details { display: table-cell; width: auto; }

/* CSS Flexbox - ignored by browsers that does not support it */
/* just an example - should use all versions for best compatibility */
.layout { display: flex; }
.layout > .picture { display: ???; flex: 0 1 30%; }
.layout > .details { display: ???; flex: 1 1 auto; }

.detailsの表示で設定したものは、flex-itemとして機能せず、残りのスペースを埋めるgrowしません。

JSを使用してブラウザのバージョンを検出し、スタイルを切り替えることなく、これをオーバーライドする方法はありますか？

ソリューションのグーグル検索を試みましたが、結果のほとんどはFlexboxに関する一般的な記事にすぎません。 this test のみが類似しており、単に後方互換性を解決しません。

更新1：これは、テーブルレイアウトと組み合わせた純粋なFlexboxおよびFlexboxの-​​ JSFiddle demo です。結果ウィンドウのサイズを変更すると、純粋なレイアウトは、テーブルとFlexboxを組み合わせた下部のレイアウトとは異なって縮小します。注：Chromeではこれは正しく機能します。Firefox、IE、Safariなどで試してください。

更新2：Safariはプレフィックス付きの定義で正しく動作します... 更新されたJSFiddleデモ

csscss3tablelayoutflexbox
12
Radek Pech

Danieldが述べたように、フレックスコンテナのすべての子（display: flexまたはdisplay: inline-flexで指定）は自動的にフレックスアイテムになります。フレックスアイテムにはdisplayプロパティがありません。代わりに、子フレックスアイテムののレイアウト方法に応じて、他の値に設定します。ブラウザがdisplay: flex-itemを認識している場合、おそらく、Flexbox spec（およびI正確に何に対応するのかわからない）。

displayの初期値はinlineであるため、display: initialはdisplay: inlineと同等です。 この回答 を参照してください。あなたがしようとしているのは、要素をデフォルトのdisplayがブラウザによって与えられたものにリセットすることです。事前にこの値を知る必要があります。 div要素の場合はdisplay: blockです。

残念ながら、これはすべてのブラウザーで既存のtable-cell宣言を上書きしますが、これには明白な理由があります。その場合、フレックスボックスをサポートしていないブラウザをサポートする必要がある場合は、テーブルレイアウトが既に機能していればそのままにしておくこともできます。

5
BoltClock

コンテナ要素にdisplay:flex-itemを設定すると、子は自動的にflexアイテムになるため、display:flexはありません。

ここにデモがあります。これは、子のdisplay:table-cellがflexプロパティの機能に影響しないことを示します子供たちに

編集：Firefoxの場合IE display:flexの後にdisplay:table-cellルールを追加する場合]ルールの場合、子のdisplay:table-cellは子のflexプロパティの機能に影響しません

/* flex layout with display:table falllback */

.layout {
  display: table; /* falllback */
  width: 100%; /* falllback */
  display: flex;
}

.layout > .picture {
  display: table-cell; /* falllback */
  width: 30%; /* falllback */
  display:flex; /* to make FF and IE happy */
  flex: 0 1 30%;
  background: tomato;
}

.layout > .details {
  display: table-cell; /* falllback */
  width: auto; /* falllback */
  display:flex; /* to make FF and IE happy */
  flex: 1 1 auto;
  background: aqua;
}
<div class="layout">
  <div class="picture">
    <img src="...">
  </div>
  <div class="details">username, email, etc.</div>
</div>
5
Danield
.child {
  flex-shrink: 0;
}

flex-shrinkプロパティを追加して、コンテンツ以上の縮小を防ぎます

2
Anees Kodappana