webflow016-01

STUDY

フレックスボックスの設定2(webflow)

◎「Reverse Layout」の選択でブレークポイントでレイアウトを逆にする必要がある場合などに便利。

サンプルページの設定
 ・Display Settingは「Flex」を選択
 ・Flex Layoutは「Horizontal」を選択
 ・水平方向は「Start」を選択  
 ・垂直方向は「Start」を選択 

webflow016-02

webflow016-02

◎デフォルトでは1行に並べようとしますが「Wrap Children」の選択で、必要に応じて折り返してレイアウトされます。

サンプルページの設定
 ・Display Settingは「Flex」を選択
 ・Flex Layoutは「Horizontal」を選択
 ・水平方向は「Start」を選択  
 ・垂直方向は「Start」を選択 

webflow016-04

webflow016-05

▽サンプル
live-preview

▷Adobe Museでホームページの制作/岸岡デザイン事務所
http://y-kishioka.com

▷Movie Web Magazine/KISHIOKA.DESIGN
http://kishioka.design

webflow015-01フレックスボックスの設定(webflow)前のページ

フレックスアイテムの設定(webflow)次のページwebflow017-01

関連記事

  1. takoyaki-movie

    Filmora

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

    Filmora9で動画編集!!映画のタイトルでも見かけるようなテキ…

  2. photoshop-art006
  3. filmora-002

    Filmora

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

    Filmora9で動画編集!!色調の統一を行うために3D LUTと…

  4. muse-Introduction2-5
  5. uiface-05

    Adobe XD

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

    「UI Faces」は条件設定に沿った、ダミーのプロフィール画像を自動…

  6. NewYork-Poster

    Photoshop

    壁に掛かっているポスターのモックアップ画像をPhotoshopで作成しました。

    壁に掛かっているポスターのモックアップ画像をPhotoshopで作成し…

  1. fullscreen-gallery

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

    フルスクリーンフォトギャラリー(Adobe Muse)
  2. studio14-01

    STUDIO

    4×4=16マスで画面全体を構成するトップページのレイアウトサンプル
  3. hover-reveal

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

    44種類のホバーアクション(Adobe Muse)
  4. studio07-01

    STUDIO

    STUDIOを使って時短で低価格の本格的なホームページを制作します
  5. sideber-nabigation

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

    サイドナビゲーションメニュー(Adobe Muse)
PAGE TOP