たぶん一番シンプルなCSS3 flex の設定

たぶん一番シンプルなCSS3 flex

CSS3のFlex便利そうだけど設定がややこしくて使ってない方いるのでは。
細かい設定ができるのは便利ですが、実際はほぼ使わないプロパティも多いかと。

なので最低限の記述の投稿です。でもこれで全く問題ないかと思います。div id=flexDraftもこのページでのデモ用なので本チャンではいらないです。

もう少し細かいアレンジは下記に。

css

#flexDraft ul { width:100%;

	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start; /*① space-between;*/
	align-items: stretch;
}

#flexDraft li { background:#eee; border:1px solid #111;

	display: flex;
	flex:1 0 150px; /*②　20%*/
}

div#flexDraft{
	width:100%; height:150px;
	border:1px solid; 
	overflow:auto;
	resize:both;
} 

html

<div id="flexDraft">
<ul>
	<li>　0　</li>
	<li>　1　</li>
	<li>　2　</li>
	<li>　3　</li>
	<li>　4　</li>
	<li>　5　</li>
	<li>　6　</li>
	<li>　7　</li>
	<li>　8　</li>
	<li>　9　</li>
</ul>
</div>

ここからbox幅を動かす ↑

アレンジ方法、メモ、補足

・自分が最初に分かりづらかったのが、外側と内側の両方に「display: flex;」が必要なところでした。今回のコードでは「ul」と「li」にあたります。

・ベンダープレフィックスは、もう必要ないかと思われます。
参考：ブラウザ対応状況Can I use?

アレンジ ①

「justify-content: flex-start; /*① space-between;*/」のところは、flex-startで左より、space-betweenで均等割りと思っていいかと。

アレンジ ②

「flex:1 0 150px; /*②　20%*/」のところ、スマホ対応も含めここが一番のキモなのではと思います。
記事等は%（パーセンテージ）で大きさの変化、画像等は大きさを固定してfloatのように段落落ち等に使う感じではと。