Flexbox は css3.0 から正式採用になったレイアウト方法です。
正式名称は『フレキシブルボックスレイアウトモジュール(Flexible Box Layout Module)』らしいです。
長いですね…強そうですね…偉そうですね…
名称は長いですが float を多用し、入れ子しまくってレイアウトしていた頃に比べれば、html・cssともにコードはスーパー簡素化できます！
基本的には グリッドレイアウト と同じく、コンテナ(親要素)内にある、アイテム(子要素)が適用範囲となり、並び順・折り返し・表示方向・寄せ具合などを調整することが出来ます。
親要素に display:flex(もしくは inline-flex); を指定することで、子要素は Flexアイテムとして認識されます
<ul>
<li>1st</li>
<li>2nd</li>
<li>3rd</li>
<li>4th</li>
<li>5th</li>
<li>6th</li>
<li>7th</li>
</ul>ul{
display:flex;
li{
width:20%;
}
}
各 liタグには width:20％; が設定されていますが、はみ出すことなく、折り返すことなくレイアウトされます。
各 liタグには width:20％; が設定されているので、横並び5個(20％×5=100％)で折り返してレイアウトされます。
各 liタグには width:20％; が設定されているので、横並び5個(20％×5=100％)で折り返してレイアウトされます、さらに上段下段が逆になります。
(イマイチ用途が見当たらないですねｗ)
<ul>
<li>1st</li>
<li>2nd</li>
<li>3rd</li>
<li>4th</li>
<li>5th</li>
</ul>ul{
display:flex;
}左から右へ、横並びでレイアウトされます。
右から左へ、横並びでレイアウトされます。
上から下へ、縦並びでレイアウトされます。
下から上へ、縦並びでレイアウトされます。
<ul>
<li>1st</li>
<li>2nd<br>2nd</li>
<li>3rd</li>
<li>4th</li>
<li>5th<br>5th<br>5th</li>
</ul>ul{
display:flex;
justify-content:space-between;
li{
padding:.5em 1em;
&:nth-child(3){
padding:2em 1em;
}
&:nth-child(4){
padding:0 1em;
}
}
}アイテムの高さ(縦並びの場合は幅)を、コンテナの高さ(縦並びの場合は幅)いっぱいいっぱいにレイアウト。
個々のアイテム高さ(縦並びの場合は幅)依存で、コンテナの高さ(縦並びの場合は幅)に対して中央揃えにレイアウト。
個々のアイテム高さ(縦並びの場合は幅)依存で、コンテナに対して上揃えにレイアウト。
個々のアイテム高さ(縦並びの場合は幅)依存で、コンテナに対して下揃えにレイアウト。
個々のアイテム高さ(縦並びの場合は幅)依存で、アイテム内ベースライン揃えにレイアウト。
<ul>
<li>1st</li>
<li>2nd</li>
<li>3rd</li>
<li>4th</li>
<li>5th</li>
<li>6th</li>
<li>7th</li>
</ul>ul{
display:flex;
flex-wrap:wrap;
height:15em;
li{
width:33.3333%;
}
}コンテナの高さ(縦並びの場合は幅)いっぱいいっぱいに、アイテムを拡げてレイアウト。
アイテムの高さ(縦並びの場合は幅)依存で、コンテナ先頭からレイアウト。
アイテムの高さ(縦並びの場合は幅)依存で、コンテナ後尾からレイアウト。
アイテムの高さ(縦並びの場合は幅)依存で、コンテナの中央揃えにレイアウト。
最上行はコンテナ上部に、最下行はコンテナ下部に、間に入る行は等間隔にレイアウト。
(横並びの場合は、左右の列はそれぞれ左端・右端に、間に入る列は等間隔にレイアウト。)
全ての行間を同じ間隔にてレイアウト。
※最上行の上・最下行の下には、上記間隔の半分
(横並びの場合は、全ての列余白を同じ間隔にてレイアウト。
※左端・右端の列外側には、上記間隔の半分)
全ての行間を同じ間隔にてレイアウト。
※最上行の上・最下行の下も、上記間隔と同じ
(横並びの場合は、全ての列余白を同じ間隔にてレイアウト。
※左端・右端の列外側にも、上記間隔と同じ)
<ul>
<li>1st</li>
<li>2nd</li>
<li>3rd</li>
<li>4th</li>
<li>5th</li>
</ul>ul{
display:flex;
}アイテムの幅依存で、コンテナ内先頭からアイテムをレイアウト。
(縦並びの場合は高さ依存で、コンテナ内先頭からアイテムをレイアウト。)
アイテムの幅依存で、コンテナ内後尾からアイテムをレイアウト。
(縦並びの場合は高さ依存で、コンテナ内後尾からアイテムをレイアウト。)
アイテムの幅依存で、コンテナの中央寄せでレイアウト。
(縦並びの場合は高さ依存で、コンテナの中央寄せでレイアウト。)
一番左のアイテムはコンテナ左端に、一番右のアイテムはコンテナ右端にレイアウト。それ以外のアイテムはコンテナ幅依存で等間隔にレイアウト。
(縦並びの場合は、最上行はコンテナ上部に、最下行はコンテナ下部に、間に入る行は等間隔にレイアウト。)
アイテム間を同じ間隔にてレイアウト。
※両端の外側には、上記間隔の半分
(※縦並びの場合は、最上行の上・最下行の下には、上記間隔の半分)
アイテム間を同じ間隔にてレイアウト。
※両端の外側も、上記間隔と同じ
(※縦並びの場合は、最上行の上・最下行の下も、上記間隔と同じ)
<ul>
<li>1st</li>
<li>2nd</li>
<li>3rd</li>
<li>4th</li>
<li>5th</li>
<li>6th</li>
<li>7th</li>
<li>8th</li>
<li>9th</li>
<li>10th</li>
</ul>ul{
li{
&:first-child{
width:50%;
order:5;
}
&:nth-child(2){
width:25%;
order:8;
}
&:nth-child(3){
width:50%;
order:2;
}
&:nth-child(4){
width:100%;
order:6;
}
&:nth-child(5){
width:25%;
order:10;
}
&:nth-child(6){
width:25%;
order:3;
}
&:nth-child(7){
width:25%;
order:9;
}
&:nth-child(8){
width:50%;
order:4;
}
&:nth-child(9){
width:25%;
order:7;
}
&:last-child{
width:25%;
order:1;
}
}
}コンテナ内の同列アイテムの表示順番を指定できます。
<ul>
<li>1st</li>
<li>2nd</li>
<li>3rd</li>
<li>4th</li>
</ul>アイテム同士の大きさ(伸び率)を相対的に指定します。
ul{
display:flex;
li{
&:first-child{
flex-grow:1;
}
&:nth-child(2){
flex-grow:2;
}
&:nth-child(3){
flex-grow:3;
}
&:last-child{
flex-grow:4;
}
}
}flex-growとは逆で、アイテム同士の小ささ(縮み率)を相対的に指定します。
ul{
display:flex;
li{
&:first-child{
flex-shrink:2.75;
}
&:nth-child(2){
flex-shrink:3;
}
&:nth-child(3){
flex-shrink:3.25;
}
&:last-child{
flex-shrink:3.5;
}
}
}アイテムの初期サイズを指定します。
ul{
display:flex;
li{
&:first-child{
flex-basis:20%;
}
&:nth-child(2){
flex-basis:25%;
}
&:nth-child(3){
flex-basis:30%;
}
&:last-child{
flex-basis:50%;
}
}
}かなり基本的な仕様から詳しく説明したつもりです。
cssって『結構使ってはいるけど、実は詳細仕様を理解していない』って方もいるかと思います。
その代表格がこの Flexbox あたりではないかと(笑
地味にプロパティとか似通っているし、単語も長いですし(笑笑
本来なら Flexbox に関する実践的な Tips 集的なものも書きたかったのですが、冗長になり過ぎたので気が向いたら、いつの日かまとめて書きたいと思います。
