CSS3のFlexboxが仕様が変わった！！新しいフレキシブルボックスレイアウトとは！？

CSS3のフレックスボックスなんですが、もともとフレックスボックスに対する査定が確定していなかったので変更する事もあるんだろうなと思っていましたが、やはり変わっていました。

それに伴って他のフレックスボックスに関連するプロパティも変更になった模様ですが、基本的に横並びにするフレックスボックスはdisplayでflexを指定するだけになったの簡単になったと思いますので、それに関して今回は記事を書いてみました。

これまでのFlexboxの流れ

もともとFlexboxの概念が生まれたのは結構前だったんですが、それから仕様が何回か変わっていきました。ちなみに2013年6月現時点では対応ブラウザはChromeのみのようなので気をつけましょう。

まぁ上記を見る限りただflexになっただけで使い方は以前と変わらずです。笑

ただめちゃくちゃ便利です♪今流行りのレスポンシブデザインもFlexboxで組めば応用効きますよ～。

親要素にflexを指定する

前回でも、説明したと思うのですが、Flexboxを使うにはフレキシブルにするボックスの要素をつつむ親要素が必要になります。下記参照

 
    

        
左のカラム
    
    

        
真ん中のカラム
    
    

        
右側のカラム
    

cssでは下記のように、親要素に「display:flex」を指定するだけです。

#parent{
    display:-webkit-flex;
   }

上記のように指定すると内包される子要素は自動的に横並びになります。まさにフレキシブルボックスレイアウトです。

しかも、各子要素の内容に合わせて自動的に幅も伸縮します。今までだと幅を指定してfloatとかかけてましたが。笑

今回は対応ブラウザも少ないので、webkitだけにベンダープレフィックスを付けています。

Flexboxのいろいろなプロパティ

さて、今回の仕様変更によって他のプロパティも一新されたっぽいのでこちらもいくつかメモっておく。

フレックスボックスの配置方法 – 横並び / 縦並び

親要素のflexを指定すると内包する要素が横並びになりますが、それを縦方向と横方向に指定するプロパティがあるんですが、こちらも今回の査定で変わったようです。

もうプロパティ名が全く違っています。新しいプロパティは「flex-direction」になりました。

/*========================*/
/*  以前の記述方法
/*========================*/

/* 左から右に横並ぶ */
#parent{ 
    box-orient:horizontal;
   }

/* 上から下に縦に並ぶ */   
#parent{
    box-orient:vertical;
   }
   

/*========================*/
/*  今回の記述方法
/*========================*/

/* 左から右に横並ぶ */
#parent{
    flex-direction:row; 
   }
   
/* 上から下に縦に並ぶ */  
#parent{
    flex-direction:column;
   }

 

フレックスボックスの配置方法 – 横並び逆順 / 縦並び逆順

今度は、htmlの記述とは逆の順番から並び替えるプロパティです。

/* 右から左に横並ぶ */
#parent{
    flex-direction:row-reverse; 
   }
   
/* 下から上に縦に並ぶ */  
#parent{
    flex-direction:column-reverse;
   }

Flexbox内のの子要素の折り返しするかどうか

子要素が親要素の幅を超えてしまった場合に、折り返すか折り返さないか設定できます。

/* 折り返す */
#parent{
    flex-wrap:wrap;
   }
   
/* 折り返さない */  
#parent{
    flex-wrap:nowrap;
   }

/* 折り返すが折り返しが上方向 */  
#parent{
    flex-wrap:wrap-reverse;
   }

子要素の幅を設定していない場合の挙動について

試していただくと分かると思うが「nowrap」の設定の場合は子要素の幅が親要素の幅に合わせて伸縮して一行を維持するので、子要素内のテキストなどは伸縮に伴い改行されたりします。

「wrap」に設定した場合は、折り返すようになるので、「nowrap」の場合とは逆に子要素の幅は維持されたまま、親要素の幅に合わせ子要素自体が複数行に改行される。

ショートカットで簡潔に記述

「flex-direction」と「flex-wrap」のプロパティをショートカットで記載できるプロパティとして「flex-flow」というのがあるようです。

/* 横並びで折り返す */
#parent{
    flex-flow:row wrap;
   }
   
/* 横並びで折りかえさない */  
#parent{
   flex-flow:row nowrap;
   }
   
/* 縦並びで折りかえさない */  
#parent{
   flex-flow:row nowrap;
   }

/* 縦並びで折りかえさない */  
#parent{
   flex-flow:row nowrap;
   }

Flexboxの水平方向と垂直方向の位置に関する記事を追加しました

という具合にFlexboxは新しいプロパティが増えたんですが、水平方向と垂直方向に関する記事は下記になります。