CSS3のFlexbox+PHPで段組レイアウト

Posted on |CSS , PHP , WEB

ボックス要素の段組レイアウトにとっても便利なFlexbox。
私も普段から鬼の様に使い倒しています。

両端揃えと端寄せを混在させたい！

まずは当初にデザイナーから上がってきたレイアウトがコチラ。

とてもシンプルです。
以下のcssで実現しました。

.flex_parent{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
}
.flex_child{
    width: 30%;
}

3個ずつ並べたいので 子要素のwidthを30%にしました。
justify-contentをspace-betweenにしてるので両端揃えで外側の余白は無し。

ちなみにこの子要素、Wordpressの関連記事をWP_Queryで引っ張ってきています。
デザイン上は9個ありますが記事数が9個以下の場合もあるわけです。

サイトオープン後、記事が5個になったときに、こうなりました。

虫食いになっとる・・・。
左寄せにすればいいのかと思い、 justify-contentをflex-startに変更してみたところ、

あかん。
てことでmargin-leftで子要素に余白を付けてみました。

.flex_child_margin{
    width: 30%;
    margin-left: calc((100% - (30% * 3)) / 2);
}

全体では以下のようになりました。

.flex_parent{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content: flex-start;
}
.flex_child{
    width: 30%;
}
.flex_child_margin{
    width: 30%;
    margin-left: calc((100% - (30% * 3)) / 2);
}

左端の子要素群には余白が要らない為、 わざわざflex_childとflex_child_marginの二つに分けました。

あとはWP_queryの該当部分に、
・左端の子要素にはflex_child
・それ以外にはflex_child_margin
とクラス名を別々に付与するコードを追加しました。

<div class="flex_parent">
<?php
	$args = array(
	    'post_type' => 'post', 
        'posts_per_page' => 9,
	);
?>
<?php $num = 1; ?>
<?php $the_query = new WP_Query($args); ?>
<?php if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); ?>
<?php
    if($num == 1 or $num == 4 or $num == 7 ){
        $class_g = "flex_child";
    }else{
        $class_g = "flex_child_margin";
    }
?>
	<div class="<?php echo $class_g; ?>">
		<a href="<?php the_permalink(); ?>">
            <?php the_title(); ?>	
		</a>
	</div>
<?php $num++; ?>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
</div>

WP_queryの段は特に普通なのでポイントとしては、

・変数$num
WP_queyを呼ぶ前に$num = 1を設定しといて、ループの最後に$num++してあげてます。こうすれば現在何番目の記事を操作しているかが分かるわけですね。

・if文で$numの値が「1,4,7」の時とそれ以外でクラス名を変える
今回は最大9個のレイアウトだったので左端は 1,4,7で決め打ちしました。

<?php
    if($num == 1 or $num == 4 or $num == 7 ){
        $class_g = "flex_child";
    }else{
        $class_g = "flex_child_margin";
    }
?>

これで記事数が半端でも綺麗に揃いました。
デモサイト見せれなくてすみません汗

毎度毎度のスマホ問題

スマホは2個づつ並んだ2列仕様だったんですね～。
ちなみに上記のCSSのままスマホで表示させると以下の感じ。

そらそうなるわな。

というわけでCSSにメディアクエリで、
・親要素のjustify-content
・子要素のmargin-left
を分岐させてみました。
今回はmax-width: 896pxなんで大体iPad以下て感じです。

.flex_parent{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content: flex-start;
}
@media screen and (max-width: 896px) {
    .flex_parent{justify-content: space-between;}
}    
.flex_child{
    width: 30%;
}
.flex_child_margin{
    width: 30%;
    margin-left: calc((100% - (30% * 3)) / 2);
}
@media screen and (max-width: 896px) {
    .flex_child_margin{ margin-left: 0; }
}

できあがり～！
最後によくわかんないけどwebkit等も入れて終了～。

.flex_parent{
    width:100%;

    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;

    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;

    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
@media screen and (max-width: 896px) {
    .flex_parent{
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
}    
.flex_child{
    width: 30%;
}
.flex_child_margin{
    width: 30%;
    margin-left: calc((100% - (30% * 3)) / 2);
}
@media screen and (max-width: 896px) {
    .flex_child_margin{ margin-left: 0; }
}

Related Post