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

    自動アニメーションでスライドを動かしてみる(Adobe XD)

    バージョン13.0から搭載された「自動アニメーション」を使って、1コマ目でタップ操作から2〜4コ…

  2. filmora033-01

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

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

  3. filmora-006

    テレビで使われるような効果を効果を試してみよう!(Filmora…

    Filmora9で動画編集!!エフェクト/テレビスタティックを使うと映像にテレビで使われているよ…

  4. filmora-007

    古い映画風の効果を試してみよう!(Filmora9)

    Filmora9で動画編集!!エフェクト/古い映画を使うと映像に10パターンの古い映画を演出する…

  5. filmora-005

    カメラのファインダー越しに見ているような効果を試してみよう!(F…

    Filmora9で動画編集!!エフェクト/ビューファインダーを使うと映像にカメラのファインダー越…

  6. filmora-002

    15種類の海外映画・ドラマ風色調効果を試してよう!(Filmor…

    Filmora9で動画編集!!色調の統一を行うために3D LUTという色の明度・彩度・色相など操…

  7. takoyaki-movie

    タイトルテキストの中に映像を映してみよう!(Filmora9)

    Filmora9で動画編集!!映画のタイトルでも見かけるようなテキストの中に映像が映り込む動画コ…

  8. dimension001

    コーヒーカップを作る(Adobe Dimension CC)

    Adobe Dimension CCを使って、コーヒーカップのシーンを作りました。コーヒーカップ…

PAGE TOP