menu

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

webflowを使用してのサイト制作を進めながら学習したことを書いていきます。
今回はフレックスアイテムの設定を紹介します。

◎コンテナに対してフレックスボックスの設定をしておく。

◎コンテナの幅に対して、オーバーライドの設定を行った画像が拡大する。

webflow017-02
webflow017-03

◎「Override alignment」の設定で画像の配置位置設定を行えます。 

webflow017-04

◎「Override order」の設定で画像の掲載順設定を行えます。
・Place Firstで一番前に。Place Lastで一番後ろに。 

webflow017-05

◎オーバーライドの設定を細かく制御することができます。
・Glow/設定していない画像に対しての拡大率を設定
・Shrink/設定していない画像に対しての縮小率を設定
・Basis/デフォルトはauto。%やpxでも指定可能。

webflow017-06

▽サンプル
live-preview

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

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

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

webflow018-01セクションの説明(webflow)

関連記事

  1. webflow011-01

    ブレークポイントで画像のサイズを変更する(webflow)

    webflowを使用してのサイト制作を進めながら学習したことを書いていきます。今回はブレークポイ…

  2. simpleshow01

    simpleshow試作その1(Adobe Premiere P…

    Adobe Premiere Pro CC/Adobe After Effects CCの学習用に…

  3. filmora036-01

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

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

  4. webflow016-01

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

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

  5. filmora-pho020-01

    教育コレクション/トランジション13種(Filmora)

    教育コレクション/トランジション13種(Filmora); from yasuo kishiok…

  6. div_block_img01

    Divブロックの説明(webflow)

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

  7. ch-lipthink01

    シーンオーディオからリップシンクを計算(Adobe Charac…

    Character Animaterを試作品を作りながら学習中 !!「タイムライン/シーンオーデ…

  8. chart-cartoon-film2-1

    Keynoteでグラフアニメーション/3D編(Keynote)

    Keynoteでグラフアニメーション/3D編(Keynote); from yasuo kish…

PAGE TOP