menu

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

◎「Reverse Layout」の選択でブレークポイントでレイアウトを逆にする必要がある場合などに便利。

サンプルページの設定
 ・Display Settingは「Flex」を選択
 ・Flex Layoutは「Horizontal」を選択
 ・水平方向は「Start」を選択  
 ・垂直方向は「Start」を選択 

webflow016-02

webflow016-02

◎デフォルトでは1行に並べようとしますが「Wrap Children」の選択で、必要に応じて折り返してレイアウトされます。

サンプルページの設定
 ・Display Settingは「Flex」を選択
 ・Flex Layoutは「Horizontal」を選択
 ・水平方向は「Start」を選択  
 ・垂直方向は「Start」を選択 

webflow016-04

webflow016-05

▽サンプル
live-preview

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

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

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

webflow017-01フレックスアイテムの設定(webflow)

関連記事

  1. keynote-animation03-04

    Keynote Animation Sample03(Keyno…

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

  2. dimension003

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

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

  3. filmora-pho019-01

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

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

  4. xd001

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

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

  5. angle-05

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

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

  6. filmora-pho024-03

    ビューティーコレクション/オーバーレイ9種(Filmora)

    ビューティーコレクション/オーバーレイ9種(Filmora); from yasuo kishi…

  7. filmora-pho025-04

    ビジネスコレクション/テキスト29種(Filmora)

    ビジネスコレクション/テキスト29種(Filmora); from yasuo kishioka…

  8. filmora-010

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

    Filmora9で動画編集!!シネマオープナーVol2から「Hit Series Pack Op…

PAGE TOP