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. filmora-pho027-01

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

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

  2. webflow004-01

    Div Blockの使用(webflow)

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

  3. container_img01

    コンテナの説明(webflow)

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

  4. filmora036-01

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

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

  5. webflow006-01

    ListとList Itemの使用(webflow)

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

  6. keynote-animation01

    インとアウトのアニメーション(Keynote Animation…

    【Keynote】をプレゼンテーション用としての利用以外に、ネット上などで掲載をするための動画作…

  7. photoshop-gallery003

    Photoshop Gallery 003

  8. filmora033-01

    旅の素敵な動画を飾る27種類のエレメント(Filmora)

    旅の素敵な動画を飾る27種類のエレメント(Filmora) from yasuo kishiok…

PAGE TOP