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-pho004-01

    テキスト「テロップ編」(Filmora)

    テキスト「テロップ編」(Filmora); from yasuo kishioka on Vim…

  2. photoshop-gallery004

    Photoshop Gallery 004

  3. filmora-pho015-01

    ファッションコレクション/タイトル30種(Filmora)

    ファッションコレクション/タイトル30種(Filmora); from yasuo kishio…

  4. filmora018

    ファッションコレクション/オーバーレイ10種(Filmora)

    ファッションコレクション/オーバーレイ10種(Filmora); from yasuo kish…

  5. transitions_img01

    トランジションの設定(webflow)

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

  6. photoshop-gallery001

    Photoshop Gallery 001

  7. webflow011-01

    ブレークポイントで画像のサイズを変更する(webflow)

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

  8. chart-cartoon-film1-1

    Keynoteでグラフアニメーション/2D編(Keynote)

    Keynoteでグラフアニメーション/2D編(Keynote); from yasuo kish…

PAGE TOP