フレックスボックスの信じられないほどの力

Sep 11, 2025

操作方法

FlexBox、またはFlexible Boxレイアウトは、Webデザイナーと開発者にコンテナ内の要素をレイアウトし、整列させ、配布するための効率的で簡単な方法を提供する強力なCSSレイアウトモジュールです。それは私たちが長い間解決するのに苦労してきた多くのレイアウトの問題を解決します。

FlexBoxの基本

その最も基本的な形式では、FlexBoxは2つの要素で構成されています.Flexコンテナ（またはフレックス親）とFlexアイテム（Flex Children）。フレックス容器は収容要素です（aのように div ）ディスプレイプロパティを考えると フレックス 。フレックスアイテムはフレックスコンテナの子要素で、さまざまな表示プロパティを通して操作できます。

FlexコンテナとFLEX項目には、それぞれ独自のプロパティの範囲があり、さまざまな方法で複雑なレイアウトの範囲を作成できます。フレックスコンテナ内の項目は、水平方向または垂直方向に配置、整列して配置され、伸縮され、伸縮されて使用可能なスペースに合わせて伸縮します。これらすべてのオプションを使用すると、応答レイアウトを簡単に作成できます。

FlexBoxの使用方法

FlexBoxの使用を開始するには、まずFLEXコンテナ（Flexアイテムを含む親要素）を作成する必要があります。この例では、Aを使用します div ブロック。要素をスタイルする前に、もう3つ追加しましょう div フレックスアイテムとして機能するために、フレックスコンテナ内のブロックをブロックします。この時点で、アイテムは積み重ねられます。

私たちの子供のDIVを整って、親コンテナの表示プロパティを設定することができます。 フレックス 。

フレックスコンテナ{
表示：Flex;

レイアウトの向け

レイアウトの方向は単にあなたの要素が自分自身を配布する方向です。フレックスコンテナのデフォルトの方向行それは子要素を水平に表示します。方向を設定することでレイアウトを垂直に切り替えることができます。 カラム 。

フレックスコンテナ{
表示：Flex;
フレックス方向：行;
}

フレックスコンテナ{
表示：Flex;
フレックス方向：列;

Flexコンテナに設定した方は、その「メイン」の方向と呼ばれ、選択していない他の方向は「クロス」方向になります。したがって、デフォルトでは、主方向は水平になり、横方向は垂直になります。

FlexBoxではレイアウトを元に戻すこともできます。逆転すると、フレックスコンテナの子が左から左へレイアウトされます（方向がある場合行）または下から上へ（方向がある場合 カラム ）。

フレックスコンテナ{
表示：Flex;
柔軟な方向：Row-Reverse。
}

フレックスコンテナ{
表示：Flex;
フレックス方向：列逆;

レイアウトを小さな画面で逆にしたい場合は、これが便利になる可能性があります。

たとえば、画面の左側にテキストと右側の画像を表示したいデスクトップ画面で言ってみましょう（上のサーフボード画像を参照）。携帯電話では、これはテキストの下に画像を移動します。方向を反転させることによって、代わりに画像がテキストの上に表示されるようにすることができます。

調整を調整します

FlexBoxの設定には、コンテンツを揃えるための2つの異なる方法もあります。フレックスコンテナ内のアイテムの水平方向の整列オプションは次のとおりです。

フレックススタート ：行の先頭に設定されている項目（レイアウトを逆にしない限り）

センター ：行内の中心のアイテム

フレックスエンド ：行の終わりに向かって設定されたアイテム（レイアウトを逆にしない限り）

間隔：行に沿って均等に分布している項目

宇宙：各要素の両側に等しいスペースで行に沿って均等に分散された項目

そのため、コードは次のようになります。

フレックスコンテナ{
表示：Flex;
フレックス方向：行;
align-content：flex-start | ..フレックスエンド|センター|間隔|スペース周辺|ストレッチ;

フレックスコンテナ内のアイテムの垂直方向の配置オプションは次のとおりです。

フレックススタート ：列の上に並んでいるアイテム

センター ：アイテムは行内の中心を付けられています

フレックスエンド ：行の底に並んだアイテム

ストレッチ ：行の高さを横切って伸びているアイテム

ベースライン ：自分のベースラインに並んでいるアイテム（テキストが座っている想像上の行）

コードは次のようになります。

フレックスコンテナ{
表示：Flex;
フレックス方向：行;
整列品：フレックススタート|フレックスエンド|センター|ベースライン|ストレッチ;

デフォルトでは、Flexコンテナの子が常に1行に収まるようにします。これを変更したい場合は、追加できます。 ラップ 属性。これにより、スペースが不足している場合、子供たちは新しい行に折り返すことができます。

フレックスコンテナ{
表示：Flex;
フレックスラップ：ラップ;

Flexアイテムはまた独自のFlexベースのプロパティを取得します。要素がFlexコンテナの内側に配置されると、自動的にフレックス子になり、独自のFlexベースのCSSスタイルが付与されます。これらのスタイルは、サイズ、アライメント、および表示の順序を制御します。

フレックスサイジング

Flexの子供は、利用可能なスペースを埋めるために（コンテナのレイアウト方向に応じて）幅または高さを変えることができます。

WebflowはFlexサイジングのための3つのプリセットオプションを提供します。必要に応じて縮小し、空のスペースを埋めるため、縮小しないでください。各子要素には独自の設定が可能なことに注意してください。これにより、デザインオプションのデザインオプションが可能になります。

フレックスアイテム{
フレックスシュリンク：＆lt;＆gt ;;
フレックス成長：＆lt;＆gt ;;
フレックスベース：長さ＆gt; | ..オート;

これらのオプションのそれぞれが何があるかを見てみましょう。

必要に応じてシュリンク： その幅/高さまたはその内容に基づいてアイテムをサイズします。アイテムは必要以上に大きくなりませんが、オーバーフローを防ぐために最小サイズに縮小する可能性があります。
空のスペースを埋める： アイテムがその親の中にあるすべての利用可能なスペースを埋めるために展開することを許可します。 Flexコンテナ内のすべてのアイテムにこれを設定した場合、それらは等量の空きスペースを占有するように拡張するでしょう
縮小しないでください： その幅/高さまたはその内容に基づいてアイテムをサイズしますが、あとえオーバーフローを引き起こしても、縮小することはできません。

FLEX項目には、親フレックスコンテナで設定されたデフォルトのアライメントが上書きされる独自のアライメント設定もあります。これらの整列は前述のように動作します。

フレックスアイテム{
表示：Flex;
フレックス方向：行;
整列品：フレックススタート|フレックスエンド|センター|ベースライン|ストレッチ;

デフォルトでは、Flex項目はソースコードに表示されるのと同じ順序で表示されます。 FlexBoxを使用すると、要素が希望する順序で要素が表示されていることを確認するためにこの動作を上書きします。

ここで使用できる4つの主なオプションです。

オート ：デフォルト値、それらがソースにあるときにアイテムを注文する
最初：ITEMがFlexコンテナの最初に表示されます
最終：アイテムがFlexコンテナで最後に表示されます
カスタム ：アイテムが表示される順序をカスタマイズできます。

カスタム順序は、FLEX項目がフレックスコンテナ内に表示される順序を指定する番号として定義できます。

フレックスアイテム{
注文：＆lt;整数＆gt ;;

なぜ私はそれを使うべきですか？

私はあなたが尋ねたうれしいです！ FlexBoxを使用すると、古いCSSレイアウトモジュールを使用して作成するには、非常に困難な（または不可能な）応答レイアウトを簡単に作成できます。

以下の画像の例を見てください - それはおそらくすでにWebを越えて見たことがあります。それらのほとんどすべてがかなりの量のCSS（特にさまざまなスクリーンサイズ）を取りますが、FlexBoxで実現するためにいくつかの単純な行だけを取ります。これらの例をアクションで見るには、訪問します FlexBox.WebFlow.com 。

フレックスボックスの信じられないほどの力

FlexBoxの基本

FlexBoxの使用方法

レイアウトの向け

調整を調整します

フレックスサイジング

なぜ私はそれを使うべきですか？

操作方法 - 最も人気のある記事

Adobe XDでプロトタイプを構築する

Redux Thunkを使い始める

あなたのアプリをサービス労働者とオフラインで作業させる

Photoshopのテクスチャの使い方

数量特定のCSSスタイルとレイアウトを作成する

Zbrushでの説得力を彫刻する方法

神話の生き物を開発する方法

60秒でPhotoshopを使ったシネマグラフを作成する

カテゴリ