FlexBoxの使い方（６）〜flexプロパティの練習

flexプロパティの練習用サンプルを作成しました。
flex-grow、flex-shrink,flex-basisの値を入れてレイアウトを確認するものです。
値は数字の０以上の整数を入れてください。
数値入力後に「CSS設定する」ボタンをクリックするとピンクの背景部分のレイアウトが変わります。

flex-growとflex-shrinkの練習

flexプロパティのショートハンド練習

出来の良いサンプルではないよ。
DogRoboよりもポンコツだと思う。そのうち暇を見つけてよくするから。。。多分。
だから面白半分になんでもかんでも食わせていると壊れてしまうに違いない。
どうか、ちょっと試す程度に留めておいてくださいませ。

Flex Boxレイアウト関連記事

• FlexBoxの使い方（１）〜display:flexについて
• FlexBoxの使い方（２）〜floatレイアウトとの違い
• FlexBoxの使い方（３）〜flexアイテムの順番を入れ替え
• FlexBoxの使い方（４）〜display:inline-flexについて
• FlexBoxの使い方（５）〜flexプロパティについて
• FlexBoxの使い方（６）〜flexプロパティの練習
• FlexBoxの使い方（7）〜 flex-wrapについて
• FlexBoxプロパティ〜まとめ
• display:flexの基本的な使い方〜脱フロートレイアウト
• flex レイアウト詳説〜Flex Box Layout