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. webflow018-01

    セクションの説明(webflow)

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

  2. uiface-05

    プロフィール画像のダミーを自動生成(Adobe XD/UI Fa…

    「UI Faces」は条件設定に沿った、ダミーのプロフィール画像を自動的に生成してくれるプラグインで…

  3. webflow003-01

    基本要素の設置(webflow)

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

  4. dimension003

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

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

  5. simpleshow01

    simpleshow試作その1(Adobe Premiere P…

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

  6. filmora018

    ファッションコレクション/オーバーレイ10種(Filmora)

    ファッションコレクション/オーバーレイ10種(Filmora); from yasuo kish…

  7. transitions_img01

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

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

  8. filmora-pho006-01

    テキスト「エンディング編」(Filmora)

    テキスト「エンディング編」(Filmora); from yasuo kishioka on V…

PAGE TOP