CSSで横並びにはflexboxという方法も。メリットは要素の配置の柔軟さにあり。

以前書いたCSSで横並びにしようという記事の続き。
参考リンク：横並びにするためのCSS一覧（float,table,inline,inline-blockなどの違い、メリット・デメリット）

使用するプロパティはflexboxというもので、flexboxを使えば横並びにするだけでなく、柔軟に配置を変えることができます。

百聞は一件にしかり。
まずは基本的な使い方を見てみましょう。


flexboxの基本の使い方：横並び

.flexbox{

	display:flex box;

	display:-webkit-box;

	border:5px solid #000;

	padding:10px;

}

.flexbox li{

	background:#000;

	padding:10px;

	color:#fff;

	margin:10px;

	

}

• 1
  
• 2
  
• 3
  

親要素にflex boxを指定することで子要素が横並びになります。floatと違って、clearする必要がないのが便利。

またdisplay:inlineに比べて、widthが要素幅になりますがもし要素内で区切る場合はinline-flexを指定すればOKです。


flexboxのちょっとした使い方：上下左右の揃え

これまで横並びで上下を合わせる場合にはtableを指定してvertical-alignを合わせなければいけませんでしたが、flexboxであれば上下もvertical-alignで合わせられます。

.flexbox{

	display:flex box;

	display:-webkit-box;

	border:5px solid #000;

	padding:10px;

	height:100px;

}

.flexbox li{

	background:#000;

	padding:10px;

	color:#fff;

	margin:10px;

}

.top li{

	vertical-align:top;

}

• 1
• 2
• 3
  

初期値が左寄せなので、真ん中に寄せる場合は-webkit-box-pack:center、右寄せは-webkit-box-pack:endでOK。

使い所によっては便利なflexboxの使い方

使いどろころがあれば便利そうなのが-webkit-box-flex。
これは子要素内で指定すれば横幅の指定を変えることができます。

• 1
  
• 2
  
• 3
  

.flexbox{

	display:flex box;

	display:-webkit-box;

	border:5px solid #000;

	padding:10px;

}

.flexbox li{

	background:#000;

	padding:10px;

	color:#fff;

	margin:10px;

	

}

li.flexbox2{

	-webkit-box-flex:2;

}

IE9までは使えませんがiOSやandroidにも対応していますしスマートフォンサイト構築の時には便利そうなflexbox。
是非お試しあれ。

最新投稿された記事はいかがですか？

• 南野どうなる?2015年冬から4大リーグにいったザルツブルクの選手をリストアップ！
• 毎日25分のオンライン中国語レッスンサイトまとめ。結構サイトによって金額と時間が違ってます。
• 中国語で覚えておきたい接続詞まとめ。
• [サッカーまとめ]2007-2016に欧州のクラブチームに移籍して日本人選手リスト。