いつの間にやら登場していてめっちゃ便利なFlexbox。
ほんとにお世話になっています。
以前はfloatやJsで書いていたレイアウトがCSSのシンプルなコードだけで実現できて、レスポンシブとの相性もばっちりというニクイやつです。
そのなかでよく使うものをいくつかメモ。
PCとモバイルで表示が違うので、ぜひ見比べてみてください。
参考にさせていただいたサイトはこちらです。
基本の見出し・画像・テキストのレイアウト
親要素に「display: flex;」を指定すると、そのコンテナのなかのアイテムが横に並びます。
アイテムは、高さがバラバラでも一番大きなサイズに自動的に揃えられます。PCで見ると細いグレーのラインの高さが同じであることが解ると思います。
モバイルでは縦に並ぶよう、メディアクエリで指定します。
見出し
本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
見出し
本文本文本文本文本文本文本文本文本文本文本文
見出し
本文本文本文本文本文本文本文本文本文本文本文
見出し
本文本文本文本文本本文本文
見出し
本文本文本文本文本文本文本文本文本文本文本文
HTMLのサンプルはこんな感じ。
<div class="flex01"> <div class="flexitem"> <div class="item-image"><img src="https://www.nullllog.com/wp/wp-content/uploads/2019/08/noimage13.jpg" alt="" /></div> <h5>見出し</h5> 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 </div> <div class="flexitem"> <div class="item-image"><img src="https://www.nullllog.com/wp/wp-content/uploads/2019/08/noimage13.jpg" alt="" /></div> <h5>見出し</h5> 本文本文本文本文本文本文本文本文本文本文本文 </div> <div class="flexitem"> <div class="item-image"><img src="https://www.nullllog.com/wp/wp-content/uploads/2019/08/noimage13.jpg" alt="" /></div> <h5>見出し</h5> 本文本文本文本文本文本文本文本文本文本文本文 </div> <div class="flexitem"> <div class="item-image"><img src="https://www.nullllog.com/wp/wp-content/uploads/2019/08/noimage13.jpg" alt="" /></div> <h5>見出し</h5> 本文本文本文本文本本文本文 </div> <div class="flexitem"> <div class="item-image"><img src="https://www.nullllog.com/wp/wp-content/uploads/2019/08/noimage13.jpg" alt="" /></div> <h5>見出し</h5> 本文本文本文本文本文本文本文本文本文本文本文 </div> </div>
CSSのサンプルはこんな感じ。
「flex-wrap: wrap;」は折り返しの指定です。3列になるよう並びます。これを記述しないと全部横に並んじゃいます。
「justify-content: space-between;」は等間隔に並べる指定。ただしコチラを記述するとサンプルのように中のアイテムが5つだった場合、下のアイテムが両端に配置されます。
それを避けるため、「.flex01::after」で空のコンテンツを入れています。
メディアクエリの「flex-direction: column;」で767px以下の環境下ではアイテムを縦に並ばせています。
※わかりやすくするために、アイテムにグレーの細いボーダーを入れています。
.flex01 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex01 .flexitem {
width: 32%;
}
.flex01::after {
content:"";
display: block;
width:32%;
}
@media screen and (max-width: 767px) {
.flex01 {
flex-direction: column;
}
.flex01 .flexitem {
width: 100%;
}
}
画像とテキストを左右交互に表示
画像とテキストを左右交互に表示。
テキストは上下左右中央に配置されるようにしています。
本文本文本文本文本本文本文
本文本文本文本文本本文本文本文本文本文本文本本文本文
本文本文本文本文本本文本文
HTMLのサンプルはこんな感じ。
<div class="flex02"> <div class="item-image"><img src="https://www.nullllog.com/wp/wp-content/uploads/2019/08/noimage11.jpg" alt="" /></div> <div class="item-text"> 本文本文本文本文本本文本文 </div> </div> <div class="flex02"> <div class="item-image"><img src="https://www.nullllog.com/wp/wp-content/uploads/2019/08/noimage12.jpg" alt="" /></div> <div class="item-text"> 本文本文本文本文本本文本文本文本文本文本文本本文本文 </div> </div> <div class="flex02"> <div class="item-image"><img src="https://www.nullllog.com/wp/wp-content/uploads/2019/08/noimage13.jpg" alt="" /></div> <div class="item-text"> 本文本文本文本文本本文本文 </div> </div>
CSSのサンプルはこんな感じ。
「flex-direction: row-reverse;」で偶数のアイテムの中身を逆順に表示させています。
「justify-content: center;」「align-content: center;」「align-items: center;」で文字を上下左右中央に配置してます。
メディアクエリでは、767px以下の場合、画像もテキスト領域も幅100%になるようにしています。
※わかりやすくするために、アイテムにグレーの細いボーダーを入れています。
.flex02 {
display: flex;
flex-wrap: nowrap;
margin-bottom: 15px;
border: 1px solid #ccc;
padding: 15px;
}
.flex02:nth-child(odd) {
flex-direction: row-reverse;
}
.flex02 .item-image {
width: 50%;
margin-bottom: 0;
}
.flex02 .item-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.flex02 .item-text {
display: flex;
flex-wrap: wrap;
flex: 1;
justify-content: center;
align-content: center;
align-items: center;
padding: 2em;
}
@media screen and (max-width: 767px) {
.flex02 {
flex-direction: column;
width: 100%;
}
.flex02 .item-image {
width: 100%;
margin-bottom: 0;
}
.flex02:nth-child(odd) {
flex-direction: column;
}
}
下部に固定表示されるボタンをつける
よくあるボタンが下に表示されるボックス。
HTMLのサンプルはこんな感じ。
<div class="flex03"> <div class="flexitem"> <h5>見出し</h5> <div class="item-image"><img src="https://www.nullllog.com/wp/wp-content/uploads/2019/08/noimage11.jpg" alt="" /></div> 本文本文本文本文本本文本文本文本文本文本文本本文本文 <div class="item-btn"><a href="#">more</a></div> </div> <div class="flexitem"> <h5>見出し</h5> <div class="item-image"><img src="https://www.nullllog.com/wp/wp-content/uploads/2019/08/noimage12.jpg" alt="" /></div> 本文本文本文本文本本文本文本文本文本文本文本本文本文本文本文本文本文本本文本文本文本文本文本文本本文本文 <div class="item-btn"><a href="#">more</a></div> </div> <div class="flexitem"> <h5>見出し</h5> <div class="item-image"><img src="https://www.nullllog.com/wp/wp-content/uploads/2019/08/noimage13.jpg" alt="" /></div> 本文本文本文本文本本文本文本文本文本文本文本本文本文本文本文本文本文本本文本文本文本文本文本文本本文本文本文本文本文本文本本文本文本文本文本文本文本本文本文 <div class="item-btn"><a href="#">more</a></div> </div> </div>
CSSのサンプルはこんな感じ。
※わかりやすくするために、アイテムにグレーの細いボーダーを入れています。
.flex03 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
}
.flex03 .flexitem {
display: flex;
flex-direction: column;
width: 32%;
padding: 1em;
border: 1px solid #ccc;
box-sizing: border-box;
}
.flex03 .item-image {
min-height: 0%;
margin-bottom: 1em;
}
.flex03 .item-image img {
width: 100%;
height: auto;
vertical-align: bottom;
}
.flex03 .item-btn {
margin-top: auto;
padding-top: 1em;
}
.flex03 .item-btn a {
display: block;
padding: .5em;
background: #34D8B7;
color: #fff;
text-decoration: none;
text-align: center;
}
.flex03 .item-btn a:hover {
background: #8BE8D6;
}
@media screen and (max-width: 767px) {
.flex03 {
flex-direction: column;
}
.flex03 .flexitem {
width: 100%;
}
}
ボタンに「align-self: flex-end;」を指定することで右下に固定する事もできます…！べんり！！
Flexboxでよく使うレイアウト まとめ
Flexbox、はじめはとっつきにくいかと思いましたが覚えると便利なんですよね。
他にもロゴとナビゲーションを並べる時やサイト全体のカラムを分ける時にも使ったりします。
※20210304追記
FLEXBOXの高さ、ズレてましたよね？？
テーマのCSSで、ボックスのlastchildにマージン0が指定されていたことが原因でした……直しました。
このページ書いた時はそろってたと思うんだけど…。
このページ、「Flexbox レスポンシブ サンプル」でせっかく1位なのに！！！恥ずかしすぎる！！
コメント