解 説

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

flex-growとflex-shrinkの練習

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

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

Flex Boxレイアウト関連記事