web-dev-qa-db-ja.com

FlexboxとTwitterのブートストラップ（または同様のフレームワーク）

最も高いものに応じてdivを同じ高さにするための解決策を探していたとき、私は最近Flexboxを発見しました。

私はCSS-tricks.comの 次のページ を読みましたが、flexboxは習得して使うのに非常に強力なモジュールであると確信しました。しかし、Twitter Bootstrap（および同様のフレームワーク）が、それらのグリッドシステムと同じ種類の機能を提供するという事実（+さらに当然のことながら）も考えさせられました。

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

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

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

htmlcsstwitter-bootstrapflexbox
159
Rvervuurt

いくつかの理由で、flexboxはブートストラップよりはるかに優れています。

  • ブートストラップはフロートを使用してグリッドシステムを作成します。これは、Flex-boxがアイテムのサイズと内容に柔軟に対応することで反対のことを行うWeb用ではないと多くの人が言うでしょう。ピクセル対em/remを使用するのと同じ違い、または余白とパディングだけを使用してdivを制御し、あらかじめ定義されたサイズを設定しないようにします。

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

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

編集：

ところで、あなたが直面している唯一の問題が同じ高さのコラムであるならば、それに対するかなりの数の解決策があります：

  • 親にdisplay: table、子にdisplay: table-cell;を使用できます。 表示で同じ高さにする方法：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-）を確認してください。プロパティ フレックスボックスのしくみについて。

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

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

105
ctf0

私はFlexboxを使ったことはありませんが（私はそれについて読んだことがあり、素晴らしいようです）、私はBootstrapフロントエンドの開発者です。最終的な決定を下す前に、Flexboxの印刷ページをテストすることをお勧めします。あなたが知っている...時々印刷スタイルはひどい頭痛であり、私が印刷フォーマットを設計しなければならないときBootstrapは私を大いに助けます。

6
kurroman

私はあなたがいなくて寂しいです CSSトリックに関する別の記事 ：

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

意味ではありません、あなたは試していないかもしれませんが、二度考えてください。そして、最終的にはすべてが望ましいブラウザサポートに依存します。

1
Kout