webflow017-01

STUDY

フレックスアイテムの設定(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)前のページ

セクションの説明(webflow)次のページwebflow018-01

関連記事

  1. filmora-009

    Filmora

    SF映画風にタイトルを演出してみよう!(Filmora9)

    Filmora9で動画編集!!シネマオープナー・プライムタイムパッ…

  2. webflow012-01

    STUDY

    不透明度の設定(webflow)

    ◎不透明度を設定した箇所を選択した状態でEffects/Opacity…

  3. webflow008-01

    STUDY

    リッチテキストの使用(webflow)

    webflowを使用してのサイト制作を進めながら学習したことを書いてい…

  4. filmora-pho015-01

    Filmora

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

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

  5. webflow013-01

    STUDY

    フィルタの設定(webflow)

    webflowを使用してのサイト制作を進めながら学習したことを書いてい…

  6. xd005

    Adobe XD

    自動アニメーションで目を左右に動かしてみる(Adobe XD)

    バージョン13.0から搭載された「自動アニメーション」を使って、イ…

  1. WP-Visual-Loops

    After Effects

    ビジュアルループの作り方【Affter Effects】
  2. studio11-01

    STUDIO

    サンプルサイト10/テーマ:家具製作所
  3. animated-buttons

    Adobe Muse CCを使ったホームページ制作

    ボタンにアニメーションを付けてワンポイント(Adobe Muse)
  4. photoshop-art006

    Photoshop

    古ぼけた写真(Photoshop)
  5. filmora-pho016-04

    Filmora

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