Flexbox-overview

フレックスボックス-概要

• C ascading S tyle S * heets（CSS）は、Webページを表示可能にするプロセスを簡素化するためのシンプルな設計言語です。 CSSは、Webページのルックアンドフィールの部分を処理します。

CSSを使用すると、テキストの色、フォントのスタイル、段落間の間隔、列のサイズとレイアウトの方法、使用する背景画像または色、レイアウトデザイン、さまざまなデバイスのディスプレイのバリエーション、画面サイズを制御できます。その他のさまざまな効果。

CSSで、ボックスの位置と寸法を決定するには、利用可能なレイアウトモードのいずれかを使用することができます-

• ブロックレイアウト-このモードはドキュメントのレイアウトに使用されます。
• インラインレイアウト-このモードはテキストのレイアウトに使用されます。
• テーブルレイアウト-このモードはテーブルのレイアウトに使用されます。
• テーブルレイアウト-このモードは、要素の配置に使用されます。

これらのモードはすべて、ドキュメント、テキスト、テーブルなどの特定の要素を揃えるために使用されますが、複雑なWebサイトをレイアウトするための完全なソリューションを提供するものはありません。 最初は、フロート要素、配置要素、およびテーブルレイアウト（多くの場合）の組み合わせを使用して行われます。 ただし、フロートでは、ボックスを水平方向にのみ配置できます。

Flexboxとは何ですか？

上記のモードに加えて、CSS3は、一般に Flexbox と呼ばれる別のレイアウトモードFlexible Boxを提供します。

このモードを使用すると、複雑なアプリケーションやWebページのレイアウトを簡単に作成できます。 フロートとは異なり、Flexboxレイアウトでは、ボックスの方向、配置、順序、サイズを完全に制御できます。

Flexboxの機能

以下は、Flexboxレイアウトの注目すべき機能です-

• 方向-Webページ上のアイテムは、左から右、右から左、上から下、下から上など、任意の方向に配置できます。
• 注文-Flexboxを使用して、Webページのコンテンツの順序を並べ替えることができます。
• Wrap -Webページのコンテンツに一貫性のないスペースがある場合（単一行）、それらを複数の行（水平方向と垂直方向）にラップできます。
• Alignment -Flexboxを使用すると、コンテナに関してWebページのコンテンツを整列できます。
• サイズ変更-Flexboxを使用すると、ページ内のアイテムのサイズを使用可能なスペースに合わせて増減できます。

サポートするブラウザー

Flexboxをサポートするブラウザーは次のとおりです。

• Chrome 29+
• Firefox 28以降
• Internet Explorer 11以降
• Opera 17+
• Safari 6.1以降
• Android 4.4以降
• iOS 7.1以降