フレックスボックスを使用して固定フッターを確立する

開始する前に: Flexbox のガイドを参照して、Web サイトにフッターを追加します。

フレックスボックスを使用すると、上にあるコンテンツの量に関係なく、サイト上の各 Web ページの下部にフッターを添付できます。

Body (すべてのページ) タグに適用されたスタイルは、サイト内のすべてのページに適用されます。デザインを効率よく配置するには、Body (すべてのページ) タグを flex に設定し、その flex の子要素を次の要素内で垂直に積み重ねます。

1. 選択してください 体 キャンバスまたはナビゲータ内の要素
2. に移動 スタイルパネル > セレクターフィールド
3. 選択する 本文（全ページ） から セレクタ分野 落ちる
4. 進む スタイルパネル > レイアウト > 画面
5. プレス フレックス
6. 縦の「下矢印”アイコンをクリックしてフレックス方向を垂直に設定します

設定することで 体 ページ上のすべてのコンテンツを包括する要素であるフッターを Flex に適用すると、フッターの上余白を自動に調整できるようになります。このアクションにより、フッターが上のコンテンツから離れ、ページの下部に固定されます。

フッターの上余白を設定するには:

1. を選択 フッター キャンバス上またはナビゲータ内
2. に向かう スタイルパネル > 間隔
3. 割り当てる 上 マージンとして 自動車

フッターを完全に下部に移動させるのに十分なコンテンツがないページでは、上部の余白によって空白スペースが生成され、フッターが下部に固定されます。逆に、コンテンツの多いページでは、フッターはページ上の他のコンテンツを認識し、上部の余白によってフッターの上に余分な空白スペースが生成されないようにします。

貴重なヒント: フッターをコンポーネントに変換してサイト全体で再利用できるようにすることで、フッターに適用された変更がサイト全体のフッターのすべてのインスタンスに確実に反映されるようにすることができます。コンポーネントに関する詳細を詳しく調べてください。