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

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

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

  2. filmora036-01

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

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

  3. okakishi-chaya_img01

    架空のサイトを制作開始(webflow)

    前回まで、制作方法を紹介するようなページを掲載してきましたが中々、これが飽いてきまして(笑)、や…

  4. filmora-pho025-04

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

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

  5. keynote-animation03-04

    Keynote Animation Sample03(Keyno…

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

  6. filmora032-01

    26種類のフレームオーバーレイ(後半)(Filmora)

    26種類のフレームオーバーレイ(後半)(Filmora) from yasuo kishioka…

  7. webflow009-01

    タブの使用(webflow)

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

  8. filmora-pho015-01

    ファッションコレクション/タイトル30種(Filmora)

    ファッションコレクション/タイトル30種(Filmora); from yasuo kishio…

PAGE TOP