menu

フレックスボックスの設定(webflow)

webflowを使用してのサイト制作を進めながら学習したことを書いていきます。
今回はフレックスボックスの設定方法を紹介します。

◎配置したコンテナに対して設定を行っていきます。
・Display Settingは「Flex」を選択
・Flex Layoutは「Horizontal」を選択
「Horizontal」は横方向の設定。「Vertical」は縦方向の設定。
スマホの縦向きは「Vertical」を選択して設定。
●上段は水平方向の設定
・Start – 左揃え
・Center – 中央揃え
・End – 右揃え
・Space between – 端から端までで均等揃え
・Space around – 端の感覚も含めて均等揃え
●下段は垂直方向の設定
・Start – 上揃え
・Center – 垂直中央揃え
・End – 下揃え
・Space between – コンテナの高さ全体に伸ばす
・Space around – ベースラインで揃える

webflow015-02

webflow015-03

▽サンプル
live-preview

▷Adobe Museでホームページの制作/岸岡デザイン事務所
http://y-kishioka.com

▷Movie Web Magazine/KISHIOKA.DESIGN
http://kishioka.design

webflow014-01ドロップダウンメニューの設定(webflow)

webflow016-01フレックスボックスの設定2(webflow)

関連記事

  1. filmora-pho008-01

    動画を分割表示させてドラマ仕立てに(Filmora)

    動画を分割表示させてドラマ仕立てに(Filmora); from yasuo kishioka …

  2. xd005

    自動アニメーションで目を左右に動かしてみる(Adobe XD)

    バージョン13.0から搭載された「自動アニメーション」を使って、イラストの目をボタンで左右に動か…

  3. filmora035-01

    旅の素敵な動画を飾る28種類のタイトル(前編)(Filmora)…

    旅の素敵な動画を飾る28種類のタイトル(前編)(Filmora) from KISHIOKA.D…

  4. okakishi-chaya_img05

    中面3ページにインタラクションとライトボックスを設定(webfl…

    架空サイト【岡岸茶屋】に「お店の紹介」「甘味メニュー」「おみやげ」ページを作成。お店の紹介ページ…

  5. filmora-pho019-01

    教育コレクション/タイトル33種(Filmora)

    教育コレクション/タイトル33種(Filmora); from yasuo kishioka o…

  6. filmora-pho014-01

    トランジション「ベーシック編6(終)」(Filmora)

    トランジション「ベーシック編6(終) 」(Filmora) from yasuo kishiok…

  7. filmora-pho010-01

    トランジション「ベーシック編2」(Filmora)

    トランジション「ベーシック編2」(Filmora); from yasuo kishioka o…

  8. div_block_img01

    Divブロックの説明(webflow)

    webflowを使用してのサイト制作を進めながら学習したことを書いていきます。今回は「Divブロ…

PAGE TOP