FlexBoxの使い方(6)〜flexプロパティの練習

HTML&CSS

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

flex-growとflex-shrinkの練習

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

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

Flex Boxレイアウト関連記事

タイトルとURLをコピーしました