Flexbox対Twitter Bootstrap（または同様のフレームワーク）[終了]

最近Flexbox、divを同じ高さにするためのソリューションを探していたときに、最高のものに依存することを発見しました。

CSS-tricks.com の次のページを読んだところ、flexbox学習と使用が非常に強力なモジュールであると確信しました。ただし、Twitterブートストラップ（および類似のフレームワーク）がグリッドシステムと同じような機能（もちろん、さらに多くの機能）を提供しているという事実についても考えさせられました。

さて、質問は次のとおりflexboxです。の長所と短所は何ですか？Flexboxでできない、Bootstrapのようなフレームワークでできることはありますか（もちろん、純粋にグリッドシステムについて話しています）。ウェブサイトに実装するとどちらが速いですか？

グリッドシステムだけの場合flexbox、純粋にを使用する方が賢明だと思いますが、すでにフレームワークを使用している場合、何かflexbox追加できるものはありますか？

flexboxフレームワークよりも「グリッドシステム」を選択する理由はありますか？

いくつかの理由で、フレックスボックスはブートストラップよりもはるかに優れています：

• Bootstrapは、フロートを使用してグリッドシステムを作成します。グリッドシステムは多くの場合、Web向けではないため、フレックスボックスは、アイテムのサイズと内容に柔軟に対応することで反対のことを行います。ピクセルとem / remを使用するのと同じ違い、または余白とパディングのみを使用してdivを制御し、事前定義されたサイズを設定しないようにします。

• ブートストラップはフロートを使用するため、各行の後にclearfixが必要です。そうしないと、高さが異なるdivの位置がずれます。フレックスボックスはそれを行わず、代わりにコンテナ内の最も高いdivをチェックし、その高さに固定します。

フレックスボックスを介したブートストラップを使用する唯一の理由は、ブラウザのサポートが不足していることです（IEが主）（ダイは既に）。また、同じWebkitエンジンを使用していても、ChromeとSafariで動作が異なる場合があります。

編集：

ところで、あなたが直面している唯一の問題が同じ高さの列である場合、そのためのかなりの数の解決策があります：

• display: table親display: table-cell;にも子にも使用できます。display：table-cellで同じ高さを取得する方法を参照してください

• 各divで絶対位置を使用できます。
  position: absolute; top: 0; bottom: 0;

• jquery / JSソリューションと、後で追加しようとしている現時点で思い出せない別のソリューションもあります。

編集2：

また、フレックスボックスの動作についてhttp://chriswrightdesign.com/experiments/flexbox-adventures/およびhttps://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-propertiesを確認してください。

編集3： https : //kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

編集4： https : //caniuse.com/#feat=flexbox

私はFlexboxを使用していません（私はそれについて読み、素晴らしいようです）が、私はBootstrapフロントエンド開発者です。最終的な決定を行う前に、Flexbox印刷ページをテストすることをお勧めします。ご存知のように...時々、印刷スタイルはひどい頭痛の種となり、Bootstrapは、印刷フォーマットを設計する必要がある場合に非常に役立ちます。

CSSトリックに関する別の記事を見逃してしまったようです。

注：Flexboxレイアウトはアプリケーションのコンポーネントと小規模レイアウトに最も適していますが、グリッドレイアウトは大規模レイアウトを対象としています。

という意味ではありません。試してはいけないかもしれませんが、よく考えてください。そしてすべては結局のところ、望まれるブラウザのサポートに依存しています。