webflow015-01

STUDY

フレックスボックスの設定(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)前のページ

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

関連記事

  1. muse-Introduction2-5
  2. ae-img001

    After Effects

    MotionElementsの素材を使った習作001

    「MotionElements」は、After Effects…

  3. webflow008-01

    STUDY

    リッチテキストの使用(webflow)

    webflowを使用してのサイト制作を進めながら学習したことを書いてい…

  4. photoshop-gallery002
  5. Pillow01

    Photoshop

    枕カバーのモックアップ画像をPhotoshopで作成しました。

    枕カバーのモックアップ画像をPhotoshopで作成しました。画像…

  6. webflow018-01

    STUDY

    セクションの説明(webflow)

    webflowを使用してのサイト制作を進めながら学習したことを書いてい…

  1. box01-01

    Cut Machine

    シルエットカメオ3で箱の展開図をカットしてみる。(silhouette CAME…
  2. filmora-010

    Filmora

    ホラー映画風のタイトルを演出してみよう!(Filmora9)
  3. filmora018

    Filmora

    ファッションコレクション/オーバーレイ10種(Filmora)
  4. fullscreen-gallery

    Adobe Muse CCを使ったホームページ制作

    フルスクリーンフォトギャラリー(Adobe Muse)
  5. eyecatch-200407

    After Effects

    イラストレーターで作成した3Dテキストのモーショングラフィックス(After E…
PAGE TOP