Flexboxのショートハンドプロパティ

この章では、Flexboxのショートハンドプロパティであるflexについて解説します。

flexプロパティとは

flexプロパティは、flex-grow、flex-shrink、flex-basisの3つのプロパティを一度に設定することができるショートハンドプロパティです。

flexプロパティの値の指定方法は以下の通りです。

flex: <flex-grow> <flex-shrink> <flex-basis>;

この形式で指定すると、それぞれの値が適用されます。値を省略した場合、デフォルト値が適用されます。

flexプロパティの使用例

以下に、flexプロパティを使用した例を示します。

<style>
.container {
  display: flex;
}
.item {
  flex: 2 1 100px;
}
.item2 {
  flex: 1 1 100px;
}
</style>

<div class="container">
  <div class="item">アイテム1</div>
  <div class="item item2">アイテム2</div>
  <div class="item">アイテム3</div>
</div>

この例では、アイテム1とアイテム3はflex-growが2、flex-shrinkが1、flex-basisが100pxに設定されており、アイテム2はflex-growが1、flex-shrinkが1、flex-basisが100pxに設定されています。

この結果、アイテム1とアイテム3はアイテム2の2倍の速さで伸び、同じ速さで縮みます。

練習問題1

以下のコードを実際に試し、アイテム1とアイテム3がアイテム2よりも速く伸びることを確認してください。

<style>
.container {
display: flex;
}
.item {
flex: 2 1 100px;
}
.item2 {
flex: 1 1 100px;
}
</style>

<div class="container">
<div class="item">アイテム1</div>
<div class="item item2">アイテム2</div>
<div class="item">アイテム3</div>
</div>

この練習問題では、アイテム1とアイテム3がアイテム2よりも速く伸びることが確認できます。

まとめ

この章では、Flexboxのショートハンドプロパティであるflexを学びました。flexはflex-grow、flex-shrink、flex-basisの3つのプロパティを一度に設定できる便利なプロパティです。これにより、より簡潔にスタイルを記述することができます。

Flexboxを理解し、実践的なレイアウトを効率よく作成するためには、これらのプロパティを使いこなすことが大切です。