記事一覧とかでブロック的な、横にいくつの並びをさせたい。
手っ取り早くリキッドレイアウトだからdisplay: flex;でjustify-content: space-between;したい。
でもこれだと記事の数がデザインで指定した列と同じになってないとspace-betweenのおかげで崩れる。
列の数に足りないときもそうならない（≒左寄せにしたい）時のやつ。
前提とする状態
例えばこんな感じでやってるとする。
- ああああああああ
- ああああああああ
- ああああああああ
- ああああああああ
- ああああああああ
- ああああああああ
- ああああああああ
[css]
ul.list{
width: 100%;
margin: 0;
list-style: none;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
ul.list li{
width: 25%;
}
@media screen and (max-width:420px){
ul.list{
flex-direction: column;
}
ul.list li{
width: 100%;
}
}
[/css]
cssで4列にしてるとこに要素は7個なので2行目は左右と中央に配置される。
この状態で、左詰めになるようにしたい。
ちなみに幅が420px以下のときは1列で縦並びにする。
やること
左詰めにするには枠と同じ数でliをきっちり詰めてやらんとどうしようもない。
phpなりjsなり、環境にあった方法で並びに足りない分を追加してやる。
[js title=”jQuery”]
var listSize = $(‘ul.list > li’).length; //liが何個あるか
var listNum = postListSize % 4; //4で割った時の余り
generateNum = 4 – listNum; //追加するliの個数
if(generateNum === 0){}else{ //追加が必要ならやる
for(generateNum > 0; generateNum–;){ //カウントが0になるまで生成する
$(‘ul.list’).append(‘
‘); //ul.listの最後に追加する
}
}
[/js]
[css]
@media screen and (max-width:420px){
ul.list li.surplus{
display:none; /* スマホ表示は縦並びにするから要らない */
}
}
[/css]
コメントの通りで、4分割するデザインだからliの数を4で割って余りを出す。
4から余りを引いて、追加する数を出す。
forでliを生成する。
liにclassつけとけば、いらないときはdisplay:none;で非表示にする。
応用：リキッドレイアウトで4列→3列→1列に対応させる
[js title=”jQuery”]
var listSize = $(‘ul.list > li’).length; //liが何個あるか
var listNum = postListSize % 4; //4で割った時の余り
generateNum = 4 – listNum; //追加するliの個数
if(generateNum === 0){}else{ //追加が必要ならやる
for(generateNum > 0; generateNum–;){ //カウントが0になるまで生成する
if(generateNum > 1){ //3列のとき非表示
$(‘ul.list’).append(‘
‘);
}else{ //1列のときに非表示
$(‘ul.list’).append(‘
‘);
}
}
}
[/js]
[css]
@media screen and (max-width:800px){
ul.list li{
width: calc(100% / 3); /* 3等分する */
}
ul.list li.surplus3{
display:none; /* 3等分用だけ残して他を消す */
}
}
@media screen and (max-width:420px){
ul.list li.surplus4{
display:none; /* スマホ表示は縦並びにするから要らない */
}
}
[/css]
cssで表示個数を切り替えられるようにclassを付与する。
4列で追加が必要なのは1～3個、3列だと1～2個。
ifで小分けにしてそれぞれ必要分を作る。
更に応用すれば何段階にでも分けられる。
まとめ
wpで必要になったからphpでやろっかなとも思ったけど、汎用性考えたらjsでとりあえずやれるようになればいいかみたいな感じで。
コメント