今回は「flex-grow」「flex-shrink」「flex-basis」3つと「flex」ショートハンドについてやってみようと思います。
基本のhtml
まずは基本になるhtmlから
<div class="flex-layout">
<div class="column-layout col-1">
<h1>Column 1</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="column-layout col-2">
<h1>Column 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="column-layout col-3">
<h1>Column 3</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>それに対しCSSは
.flex-layout {
display: flex;
width: 1000px; //今回は全体の幅を1000pxとしました。
}とすることで3カラムのレイアウトはできます。
Flexboxのいいところは内容量の違うboxが並んでも、高さを揃えてくれるところにあります。
デザインのよって高さを揃えなきゃいけないときには便利です。
flex-growプロパティ
flex-growプロパティはflexアイテムの伸び率を設定することができるプロパティで数字で指定します。
flexコンテナ内にflexアイテムが入っています。内容が少なくてflexコンテナに余りが出る場合でもflaxアイテムが自動的に伸びて余白を埋めてくれます。
その自動的に伸びる伸び率を指定できるのが「flex-grow」プロパティです。
.flex-layout .column-layout {
flex-grow: 1;
}とすると均等にレイアウトされます。
flex-shrinkプロパティ
flex-shrinkプロパティはflexアイテムの縮む倍率を指定するプロパティで数字で指定します。
「flex-wrap:nowrap;」と同時にしていしないと無視されます。（「flex-wrap:nowrap;」は初期値なので特に設定する必要はありません。）
.flex-layout .column-layout {
width: 500px;
flex-wrap: nowrap;
}
.flex-layout .col-1 {
flex-shrink: 2;
}ここではわざとflexアイテムの幅を500pxにしてflexコンテナをはみ出す設定しています。
そこでColumn1だけに「flex-shrink:2;」を指定すると縮む倍率が他の2つのflexアイテムより2倍になります。
375px(実寸) ÷ Column 2(500px) ＝ 0.75(75%)
よって25％の縮率となります。Column3も同様。
ですが、Column1は倍の50%の縮率となり、結果250pxとなります。
ちょっとややこしいですが・・・
flex-basisプロパティ
flex-basisプロパティはwidthプロパティやheightプロパティと同じです。
「flex-direction」プロパティが「row」「row-reverse」のときは幅となり、「column」「column-reverse」のときは高さとなり単位付きの数字で指定します。
.flex-layout .column-layout {
flex-basis: 200px;
}このように指定すると全体の幅は関係なく200pxづつで納まります。
この3つのプロパティをまとめて指定できるのがショートハンドの「flex」になります。
flexプロパティ
.hoge {
flex: [flex-grow] [flex-shrink] [flex-basis];
}となりますが、
- 単位がない値を1つだけ指定するとflex-grow
- 単位付きで1つだけ指定するとflex-basis
- 単位なしと単位ありで2つの値を指定するとflex-growとflex-basis[flex:1 50%;]
- 単位なしの値を2つ指定するとflex-growとflex-shrink
となります。
まとめ
色々やってみましたけど要はflaxプロパティを覚えておけば大丈夫ですね。
