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. angle-05

    特定の領域に画面を自動的に配置するプラグインのご紹介(Adobe…

    レイアウトを行ったページを別ページで作成した多角形の領域に自動的に比率や角度を調節して配置することが…

  2. filmora-009

    SF映画風にタイトルを演出してみよう!(Filmora9)

    Filmora9で動画編集!!シネマオープナー・プライムタイムパックの中から「オープナー6」に…

  3. filmora-pho027-01

    ビジネスコレクション/オーバーレイ 6種(Filmora)

    ビジネスコレクション/オーバーレイ6種(Filmora); from yasuo kishiok…

  4. dimension003

    チョコレートのパッケージを作る(Adobe Dimension …

    Adobe Dimension CCを使って、チョコレートのパッケージを作りました。パッケージの…

  5. filmora-pho010-01

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

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

  6. photoshop-art006

    古ぼけた写真(Photoshop)

  7. xd001

    バージョン13.0になって、ようやく取り組む(Adobe XD)…

    世の中に登場したから中々、具体的な使い道が見つからず取り組んでいなかったのですが、先日のAdob…

  8. keynote-animation03-04

    Keynote Animation Sample03(Keyno…

    企業などの解説動画作成に【Keynote】が使用されるケースが増えているということなので、30秒…

PAGE TOP