Flexboxを使った基本的なレイアウト（パターン１）

2022年2月18日 19:15

こんにちは。Minaです。
今回はHTMLとCSSに関する記事になります。
Flexboxを使った基本的なレイアウト（パターン１）について紹介します。

sp版

Flexboxレイアウト（sp版）

pc版

Flexboxレイアウト（pc版）

sp版では、６つのアイテムが1列に2つずつ並んでいます。pc版では、6つのアイテムが1列に3つずつ並んでいます。各アイテムは、画像（ここでは背景色をつけただけ）と文章で構成されています。今回はこれをモバイルファースト（sp版の表示を基本とする）で作っていきます。

では、さっそく、htmlを見ていきましょう。少し長いです。

<!DOCTYPE html>
<html lang="ja">

<head>

</head>

<body>

<h2 class="heading">Flexboxレイアウト</h2>

<div class="item">
<div class="item-img"></div>
<p class="item-txt"><span>テキスト</span>テキストボックス。テキストボックス。テキストボックス。テキストボックス。
テキストボックス。テキストボックス。</p>
</div>

</div>

</div>

</body>

</html>

ここまでです。

<div class="item-img"></div>
が画像（ここでは背景色をつけるだけ）になります。

<p class="item-txt"><span>テキスト</span>テキストボックス。テキストボックス。テキストボックス。テキストボックス。
テキストボックス。テキストボックス。</p>
が文章になります。

これら画像と文章を1セットとして、itemクラスを作り囲っています。このitemを6つ作ります。1つ作ったら後はコピペです。そして、各itemをFlexboxで横並びにするため、containerクラスを作り囲っています。

htmlは以上になります。次は、cssを見ていきましょう。

Flexboxを使った横並びをする前に、大本の設定を行います。

*{
margin : 0;
padding : 0;
}

*,
*::before,
*::after{
box-sizing : border-box;
}

html{
font-size : 100%;
}

body{
font-family : sans-serif;
color : #432;
}

リセットcssを読み込んでいないので、ブラウザによる空白を、
*{
margin : 0;
padding : 0;
}
で取り合えずなくしています。

また、
*::before,
*::after{
box-sizing : border-box;
}
でボックスモデルをborder-boxに変更しています。

では、Flexboxを使った横並びの設定をしていきましょう。

まずは、画像の設定を行います。

.item-img{
background-color : #ddd;
width : 100%;
height : 200px;
}

画像の色は灰色にしています。
横幅は親要素の100%にし、高さを200pxに固定しています。

続いて、文章の設定を行います。

.item-txt span{
display : block;
}

spanをブロック要素にして改行させています。

続いて、itemクラスの設定を行います。

.item{
width : calc((100% - 20px) /2);
margin-top : 20px;
}

sp版では、1列に2つ並べるため、横幅100%から、間の余白の20px分取って、残りを2分割しています。calcは計算してくれる関数になります。
また、上マージンを20pxとっています。

続いて、containerクラスの設定を行います。

.container{
display : flex;
flex-wrap : wrap;
justify-content : space-between;
margin-top : -20px;
}

display : flex;で要素を横並びにしています。
flex-wrap : wrap;で要素を折り返して表示させています。
justify-content : space-between;で最初と最後の要素を両端に配置させています。残りの要素は均等に間隔を空けて配置されます。
itemクラスで、width : calc((100% - 20px) /2);としたので、20pxが間に入ります。
margin-top : -20px;でitemクラスでつけたmargin-top : 20px;が、1列目にもついてしまうため、それを相殺しています。

続いて、全体を囲むflexboxの設定です。

.flexbox{
padding : 0 20px;
}

左右の両端に余白20pxを設けています。

最後に、見出しとなるheadingクラスの設定をします。

.heading{
padding : 20px 0;
}

上下に20pxの余白を設けています。

以上がsp版の設定になります。
続いて、pc版の設定をしていきます。
メディアクエリを使います。一気に見てしまいましょう。

@media screen and (min-width : 768px),print{

.flexbox{
max-width : 1200px;
margin : 0 auto;
}

.item{
width : calc((100% - 40px) /3);
}

}

ここまでです。

まず、@media screen and (min-width : 768px)で、画面幅768px以上の設定をしますと宣言しています。

.flexbox{
max-width : 1200px;
margin : 0 auto;
}

max-width : 1200px;で最大横幅を1200pxに設定しています。
margin : 0 auto;で左右に中央寄せしています。

.item{
width : calc((100% - 40px) /3);
}

pc版では、1列に3つ並ぶため、間の余白が2か所できることになります。なので、20px×2=40px分を横幅100％から取り除き、残りを3分割しています。これで既に設定してある、justify-content : space-between;と合わせることで、3つの要素が均等に配置されます。

ところで、何故、justify-content : space-between;を使うか、justify-content : space-evenly;を使って両端の余白も設定しても良いのではないかと思った方もいると思いますが、両端の余白は、justify-content : space-evenly;を使わなくても、全体を囲っているクラス（ここではflexboxクラス）に余白をつけることで、簡単に設けることができるからですね。こうすることで、headingクラスの設定を別途行わなくてよくなります。

ちなみに、もし、justify-content : space-evenly;を使うとしたらどうなるのかも載せておきます。
まず、sp版の方は、3か所に余白が発生するので、20px×3=60px分を取り除いて2分割します。

.item{
width : calc((100% - 60px) /2);
margin-top : 20px;
}

そして、headingクラスの左右にも20pxの余白が入るように変更します。

.heading{
padding : 20px;
}

あと、flexboxでのパディングはつけません。

また、pc版での表示では、1列に3つ並べるため、余白が4か所に発生するので、20px×4=80px分を取り除いて、3分割します。

@media screen and (min-width : 768px),print{

.item{
width : calc((100% - 80px) /3);
}

}

おつかれさまでした。
以上がFlexboxを使った基本的なレイアウトについての説明になります。
説明を読んでも、分かりにくいと思った部分もあると思いますが、実際に手を動かして、あれこれ試してみると、意外とすんなり分かってきます。なので、私の説明が下手くそで分かりにくいと感じても諦めないでください。
私もHTMLとCSSを始めてまだ日が浅いですが、そんな拙いコードでも、誰かの参考になれば幸いです。
では、今日も明日もゆるりと頑張りましょう。

この記事が気に入ったらサポートをしてみませんか？