今回はCSSでレイアウトを行う上で、基本となる『FlexBox』について初心者向けに解説していきます。
今回のポイントはブロックの並びです。
『横並び』『縦並び』『折り返し』について学んでいきましょう。
まずは実際のコードを見ながら『FlexBox』をコーディングしていきましょう。
今回は事前に以下のように、HTMLとCSSコードを準備しておきました。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>FlexBox</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="contents">
<div class="box1">①</div>
<div class="box2">②</div>
<div class="box3">③</div>
<div class="box4">④</div>
</div>
</body>
</html>
CSS
.box1{
width: 100px;
height: 100px;
background-color: burlywood;
}
.box2{
width: 100px;
height: 100px;
background-color: green;
}
.box3{
width: 100px;
height: 100px;
background-color: sienna;
}
.box4{
width: 100px;
height: 100px;
background-color: cornflowerblue;
}
ブラウザ表示
今回準備したソースコードのポイント
１．HTMLでdiv要素でブロックを作成
２．CSSでdiv要素（ブロック）を縦横100px幅の正方形に指定
３．div要素（ブロック）を見やすいように背景色を指定
FlexBoxの使い方
並びを変えたい対象の要素の親要素へ『display: flex;』を記述する
CSS
.contents{
display: flex;
}
.box1{
width: 100px;
height: 100px;
background-color: burlywood;
}
.box2{
width: 100px;
height: 100px;
background-color: green;
}
.box3{
width: 100px;
height: 100px;
background-color: sienna;
}
.box4{
width: 100px;
height: 100px;
background-color: cornflowerblue;
}
ブラウザ表示
いかがですか？
ブロックが横並びになったと思います。
凄い💦
簡単に横並びが出来ちゃった😳
そうだね🍎
このようにFlexBoxを使うと簡単にレイアウトを変えられるよ✨
FlexBoxでの並び調整
いよいよここからが今回の本番だよ🍎
右から左にブロックを配置（flex-direction: row;）
先程コーディングした『.contents』へ以下のようにコードを追加してみましょう。
CSS
.contents{
display: flex;
flex-direction: row;
}
ブラウザ表示
変化は見られませんね。
これは『flex-direction: row;』がFlexBoxのデフォルト値であることを示しています。
よってFlexBoxのデフォルト値は右から左でブロックが配置されるということになります。
何も指定していない場合は『flex-direction: row;』だよ🍎
上から下へブロックを配置（flex-direction: column;）
先程コーディングした『.contents』へ以下のようにコードを修正してみましょう。
CSS
.contents{
display: flex;
flex-direction: column;
}
ブラウザ表示
ブロックが上から下に配置されたことが確認できます。
このように『flex-directionプロパティ』を使ってブロックの横や縦への並び替えを行います。
flex-direction: ○○○○;は横配置か縦配置を指定するよ🍎
ブロックの折り返し
先程コーディングした『.contents』へ以下のようにコードを修正してみましょう。
CSS
.contents{
display: flex;
flex-wrap: wrap;
}
ブラウザ表示
ブラウザのウィンドウが小さくなると、ブロックが折り返して表示されます。
スマホ向けのサイトによく使われる手法だね🍎
このようにFlexBoxにはブロックの並び替えを指定する方法があります。
どんどん使ったり、実験をして慣れていきましょう。
関連記事
