2022-04-21Advertisementsflexプロパティは、display:flex;で親要素をflex要素にした後に、その子要素(=flexアイテム)のあしらい3つを一括指定するためのショートハンドのプロパティです。整理してまとめてみました。flexの値そのほかflexショートハンドプロパティの使い道コンテンツの比率を固定1つは固定幅、ほかは可変に。flex:1;と書くと、上記プロパティ3点を指定していることと同じになります。0;と書いても、flex:1;と同様の意味の指定になります。3点のプロパティそれぞれの意味は次のようになります。Flex-growとはFlex-growは、親要素にdisplay:flexをかけてflexアイテムを並べ、利用可能なスペースが余った時に、それをどう分配するかの比率を設定して、アイテムを伸ばします。flex-grow初期値は0。上記の画像の例の場合、flex-grow:2;は余ったスペースの2/3、flex-grow:1は余ったスペースの1/3が配分されます。3つそれぞれがflex-grow:1;なら、余ったスペースの1/3分ずつ配分されます。Flex-shrinkとはFlex-growとは逆に、Flex-shrinkは子要素の幅を縮めるとき、どのくらい縮めるかの比率を設定します。flex-shrinkの初期値は1。上記の画像の例の場合、flex-shrink:2;は、flex-shrink:1;の2倍縮まります。2つそれぞれがflex-shrink:1;なら、縮める必要のあるスペースの1/2ずつ縮まります。Flex-basisとは伸縮前の元々のサイズ(幅もしくは高さ)を定義します。flex-basisの初期値はauto。この値をauto以外にしていて、別途widthやheightプロパティでも幅や高さを設定している場合、flex-basisの方の値が優先されます。次に、flexプロパティの、指定方法による違いをまとめてみました。一部の値を省略した場合は、指定した箇所以外のプロパティ値はそれぞれflex-grow:1;flex-shrink:1;flex-basis:0;とみなされ、一部初期値とは異なる値になります。flex-basis:0;とflex-basis:auto;の違いは何?と思い、実際に試してみると、flex-basis:0;の場合、中身の量にかかわらず均等に割り切られ、収縮の仕方が異なるようです。flexに値を1つだけ指定ショートハンドでの省略時の初期値も踏まえて、flexショートハンドで値を1つだけ指定した場合の例は次のようになります。/*flex:2;なら、flex-growの値が2に。/*flex:100px;(widthかheightになりうる値)なら、flex-basisの値が100pxに。画面幅を変化させたときは、下記の図のように画面幅に合わせて伸縮します。次に、flexショートハンドで値を2つ指定した場合の例になります。最後に、flexショートハンドで値を3つ指定した場合の例になります。flexの値そのほか色々ありすぎて少し混乱してきそうですが、ほかにも下記のような指定例があります。使い方を確認したところで、flexショートハンドを使った例をいくつかみてみたいと思います。}サイドとメインが常に1:2になります。1つは固定幅、ほかは可変に。/*flex-basis:100px;でも同じ。Flex-basisのプロパティを一括指定する、flexのショートハンドプロパティについてご紹介しました。Previous【内部SEO対策】OGPの<meta>タグとOGP画像の設定方法NextContinue海外在住で思う、日本の良いところ10個AdvertisementsManaウサギと美術館好きな、ロンドン在住のイラストレーター&デザイナーです。Webやデザインに関するアウトプットがメインです。