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. dimension003

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

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

  2. filmora035-01

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

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

  3. filmora-pho011-01

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

    トランジション「ベーシック編3」; from yasuo kishioka on Vimeo.…

  4. text-and-particle

    テキストとパーティクル(After Effects)

    text-and-particle from yasuo kishioka on Vimeo.…

  5. webflow007-01

    地図の設置(webflow)

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

  6. webflow004-01

    Div Blockの使用(webflow)

    サイト制作を進めながら学習したことを書いていきます。今回はの紹介になります。は、他の要素…

  7. filmora-pho003-01

    テキスト「タイトル編」(Filmora)

    テキスト「タイトル編」(Filmora); from yasuo kishioka on Vim…

  8. webflow002-01

    スライドショーの設置(webflow)

    サイト制作を進めながら学習したことを書いていきます。今回はスライドショー設置の紹介になります。…

PAGE TOP