Flexboxの各プロパティを試すことができるWEBサービス「Flexbox Playground」

Flexboxの各プロパティを試すことができるWEBサービス「Flexbox Playground」

スポンサードリンク
Flexboxの各プロパティを試すことができるWEBサービス「Flexbox Playground」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加

Flexbox Playgroundは、Flexboxのプロパティの値を変更して、どういうレイアウトになるのかを試すことができるWEBサービスです。

Flexbox Playgroundの使い方

1. Flexbox Playgroundにアクセスします。
2. 「Children Width」で子要素の横幅を決定します。

Children Width

3. 「Parent Flex Properties」で各プロパティの値を変更します。

Parent Flex Properties

4. 右側の「Result」にリアルタイムで設定内容が反映されます。

Result

5. さらに、「Result」の各要素にマウスホバーすると、以下のプロパティ値を変更することができます。

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • align-self

あとがき

実際にサイトで実装する前に、Flexbox Playgroundで各プロパティの挙動を確認しておくと良いですね。

複雑なレイアウトも直感的に作ることができるようになっています。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。