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

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

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

  2. Filmora031-01-01

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

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

  3. transitions_img01

    トランジションの設定(webflow)

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

  4. filmora-pho024-03

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

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

  5. filmora034-01

    旅の素敵な動画を飾る10種類のオーバーレイ(Filmora)

    旅の素敵な動画を飾る10種類のオーバーレイ(Filmora) from KISHIOKA.DES…

  6. filmora-pho016-04

    ファッションコレクション/トランジション18種(Filmora)…

    ファッションコレクション/トランジション18種(Filmor; from yasuo kishi…

  7. filmora-pho002-01

    テキスト「オープニング編」(Filmora)

    テキスト「オープニング編」(Filmora); from yasuo kishioka on V…

  8. div_block_img01

    Divブロックの説明(webflow)

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

PAGE TOP