CSS3を勉強したい

CSS3Cascading Style Sheets

flexプロパティを使ってflexアイテムを伸縮させる

flexプロパティを指定することで、flexアイテムを、flexコンテナのサイズに合わせて伸縮するよう設定することができます。

フレックスボックスには、flexアイテムを伸縮させて、flexコンテナにぴったり収まるようにする機能があります。

この機能を活用する為の重要な役割を持つのがflexプロパティです。

flexプロパティの記述箇所はflexアイテムです。

display: flex;を指定した、項目を横並びにしただけの見本が下記になります。flexプロパティの指定はしていません。

HTML

<ul>
    <li>ホーム</li>
    <li>会社概要</li>
    <li>商品</li>
    <li>アクセス</li>
    <li>問い合わせ</li>
</ul>
CSS

ul {
    display: flex;
    background-color: #555;
    color: #fff;
}
li {
    padding: 0 10px;
}

上のコードの結果が下です。

  • ホーム
  • 会社概要
  • 商品
  • アクセス
  • 問い合わせ

flexアイテムの幅がコンテンツ(要素の内容)の分しかありませんので、flexコンテナが広がった状態では空白ができてしまいます。そこでflexプロパティを指定することで、各flexアイテムの幅が、flexコンテナに見合った幅まで広がります。

flexプロパティの値とその意味、適用した場合の見本を見ていきます。

flexプロパティと値を理解する

書式は
flex: 拡大比 縮小比 基準サイズ;
で、3つの値を指定します。

flexプロパティの初期値は0 1 autoです。拡大比が0、縮小比が1、基準サイズがautoということです。

そしてこの初期値を、言葉で言い表すと、「親要素に合わせた拡大はしないが縮小はする。そして伸縮前の基準サイズはコンテンツが収まる幅にする。」となります。

どういうことか、詳しく見ていきます。

flexプロパティの値

値の3番目である「基準サイズ」がautoの場合、伸縮前のflexアイテムはコンテンツが収まる幅(つまりコンテンツ幅)で表示されます。先の見本での「会社概要」や「商品」で分かるように、コンテンツが1行で収まるサイズになります。

flexプロパティの値のベースサイズが「auto」の場合

そしてflexアイテムは、このサイズを基準にして伸縮することになり、その際の伸縮に関する指定が1番目と2番目の値です。

拡大比(1番目の値)

flexアイテムの基準サイズよりもflexコンテナの幅が広い場合、各flexアイテムは、拡大比(1番目の値)を基に幅を広げます

この時の幅の広がり方は、flexコンテナの余った幅を、各flexアイテムに分配される形になります。そこで拡大比の値が用いられます

拡大比の値と分配の関係を見ていきます。

拡大比の値(1番目の値)が0の場合、余った幅を分配する比率が(先の見本では項目が4つなので)「0:0:0:0」ということです。

これは数値上、結果的に分配されていないのと同じ状態です。つまりどのflexアイテムも幅を広げません。

flexプロパティの値の拡大比が「0」の場合

拡大比に当たる値が1だった場合、余ったスペースは各flexアイテムに「1:1:1:1」で分配されることになります。

flexプロパティの値の拡大比が「1」の場合

縮小比(2番目の値)

flexアイテムの基準サイズよりもflexコンテナの幅が狭まった場合、各flexアイテムは、縮小比(2番目の値)を基に幅を縮めます

縮小比の値と分配の関係を見ていきます。

縮小比の値(2番目の値)が1の場合、不足した幅の分を「1:1:1:1」で分配する形になります。これは縮むことを意味しています。そして基準サイズよりもさらに縮んだ場合は、コンテンツであるテキストを改行させて表示します。

flexプロパティの値の縮小比が「1」の場合

縮小比が0だった場合は「0:0:0:0」、つまり「分配されない」ということに等しくなります。これは、各flexアイテムは基準サイズよりも縮むことはない、ということです。

結果、flexコンテナもそれ以下の幅にはなりません

flexプロパティの値の縮小比が「0」の場合

flexプロパティを指定した見本コード

flexアイテムにflex: 0 1 auto;(初期値)を指定した場合を見てみます。

拡大比は0なので各flexアイテムは伸びません。また縮小比は1なので、各flexアイテムは、基準サイズよりも狭まった場合でも、コンテンツを改行させながら縮みます。

<ul>
    <li>ホーム</li>
    <li>会社概要</li>
    <li>商品</li>
    <li>アクセス</li>
    <li>問い合わせ</li>
</ul>
ul {
    display: flex;
    background-color: #555;
    color: #fff;
}
li {
    flex: 0 1 auto;
    padding: 0 10px;
}

上のコードの結果が下です。

  • ホーム
  • 会社概要
  • 商品
  • アクセス
  • 問い合わせ

次は、値を1 1 autoに指定してみます。

拡大比が1なので各flexアイテムは、flexコンテナの余った幅が分配されて伸びます。

また縮小比も1で、各flexアイテムは、基準サイズよりも狭まった場合にコンテンツを改行させながら縮みます。

<ul>
    <li>ホーム</li>
    <li>会社概要</li>
    <li>商品</li>
    <li>アクセス</li>
    <li>問い合わせ</li>
</ul>
ul {
    display: flex;
    background-color: #555;
    color: #fff;
}
li {
    flex: 1 1 auto;
    text-align: center;
    padding: 0 10px;
}

上のコードの結果が下です。

  • ホーム
  • 会社概要
  • 商品
  • アクセス
  • 問い合わせ

最後に、値を1 0 autoに指定してみます。

拡大比が1なので各flexアイテムは、flexコンテナの余った幅が分配されて伸びています。

縮小比は0なので、例えflexコンテナが基準の幅よりも狭まっても、各flexアイテムへの縮んだ幅の分配はありません。よって各flexアイテムは、基準サイズ以下になることはありません。

<ul>
    <li>ホーム</li>
    <li>会社概要</li>
    <li>商品</li>
    <li>アクセス</li>
    <li>問い合わせ</li>
</ul>
ul {
    display: flex;
    background-color: #555;
    color: #fff;
}
li {
    flex: 1 0 auto;
    text-align: center;
    padding: 0 10px;
}

上のコードの結果が下です。

  • ホーム
  • 会社概要
  • 商品
  • アクセス
  • 問い合わせ