2016-08-22 4 views
1

CSSを習得し、レスポンシブな列レイアウトを作成する際には、フレックスボックスメソッドを教えました(ただし、あまり使用しないでください)。最近、列や列数などを使用してチームツリーハウスから新しいビデオを見て、反応しやすい列デザインを作成しました。どちらを使うのが良いですか、または3番目のオプションが最高ですか?レスポンシブデザイン:Columns vs Flexbox

編集:申し訳ありませんが、明らかに古い動画です。私が求めているのは、それが私のWebデザインのトラックになかったからです。

答えて

0

最新のページレイアウトのほとんどは、浮動列から離れてフレックスボックスに移行しています。あなたは、ブートストラップ4でさえも、フレックスボックス上のレイアウトに基づいていることに気付くでしょう。

私が見つけたフレックスボックスを使用する主な利点は、画期的な垂直配置です。それ以前は、開発者が直面していた最大の痛みの1つだったからです。あなたはまた、非常にクールなDOM要素を並べ替えることができます。フレックスベースもあり、固定ディメンションのdivを持ち、他のdivが幅/高さの残りの部分を占めることを許可します。可能性は無限大!

TL; DRフレックスボックスはあなたの人生を楽にします。古いブラウザをサポートしている場合は問題ありません。

-1

CSSをすでに使い慣れていて、応答性の高いデザインが必要な場合は、Boostrapをご覧ください。ピックアップは簡単です。私は、すべてのプロジェクトで独自のCSSをコーディングするのではなく、時間と労力を節約することができます。

-1

cssで作業する場合は、サポートするブラウザを常に考えてから、使用する機能を選択する必要があります。あなたのケースでは例えば、便利なウェブサイトhttp://caniuse.com/

があることをあなたはIE8の列http://caniuse.com/#search=columnsをサポートしていないことがわかりますし、どちらもそれはあなたが私はあなたがtipical FLOATED列を使用するお勧めすなわち8をサポートしたい場合はそのフレキシボックスhttp://caniuse.com/#search=flexboxをサポートしていないためにアプローチ。そこには多くのグリッドシステムがありますが、私は上に示唆したように行くでしょう。 http://getbootstrap.com/

1

CSSグリッドは古い浮動列と同じではありません。 teamtreehouseのようなCSSグリッドが使われているようです。

CSSグリッドは2dシステム(行と列)ですが、flexboxは1d(行または列のいずれか)です。したがって、これらはページレイアウト用のCSSグリッドと内部ディテールレイアウト用のフレックスボックスで組み合わせて使用​​できます。参照:

https://tutorialzine.com/2017/03/css-grid-vs-flexbox