要素を横並びにしたいならこれで決まり！flexboxの使い方！

要素を横並びにしてメニューバーを作りたい！

画像を左、説明文を右といったレイアウトにしたい！

そんなときflexboxが大活躍します。

でも何をどう設定すれば自分の望んだレイアウトになるのかわからないって言う方は結構多いんじゃないでしょうか。

この記事ではflexboxの使い方と、flexboxに何をどう設定すればどんなレイアウトになるのかをわかりやすく説明します。

この記事を読めばこんなことがわかる

flexboxに何をどう設定すれば自分の望んだレイアウトになるのかすぐにわかる

flexboxの文法、書き方
1. 記載の仕方
プロパティ一覧
1. 親要素に指定するプロパティー一覧
2. 子要素に指定するプロパティー一覧

flexboxの文法、書き方

flexboxを使用するには以下の２つの要素が必要となります。

親要素
子要素

１：親要素を作る

htmlにて親要素を製作します。子要素とは並べ替える実際のアイテム（要素）のことで、そのアイテム（要素）の範囲を決めるためdivなどで囲い、親要素を作ります。

flexboxの使い方要素関係

２：cssでflxe指定やプロパティの設定を行う。

記載の仕方

htmlにて並び替えをしたい要素をdivで囲い範囲指定をします。

この場合itemをcontainerで囲っているので、containerが親要素、itemが子要素となります。

<div id="container">
 <div class="item">１</div>
 <div class="item">２</div>
 <div class="item">３</div>
 <div class="item">４</div>
</div>

</div>

htmlの準備ができたらcssでプロパティの設定をします。

親要素であるcontainerへdisplay:flxe;と記載することで親要素に囲まれたアイテム（子要素）にlfexboxが適用されます。

#container{
 display:flex;
 /*プロパティの設定をこちらに記載*/
}

#container{

display:flex;

/*プロパティの設定をこちらに記載*/

}

ではまずdisplay:flxe;を当てない状態だとどうなるか見てみましょう。

divタグで囲ったものはブロック要素として認識されるのでアイテム（子要素）が縦に並んでしまいます。

１

２

３

４

５

ですがcssにて親要素containerにdisplay:flxe;を当てるとアイテム（子要素）が横に並ぶようになります。

１

２

３

４

５

次に、プロパティを設定して少し複雑なデザインに変更してみましょう。

プロパティ一覧

プロパティーは大きく２つに分けられ、

親要素に指定するプロパティー
子要素に指定するプロパティー

が存在します。

普通にしようするぶんにはほとんど親要素に指定するプロパティーしか使用しません。

親要素に指定するプロパティーは子要素全体に影響するプロパティーで、全体の要素の並び方を指定する際に使用します。

子要素に指定するプロパティーは、各要素個別に何かほどこしたいときに使用します。

より複雑のデザインの場合に使用することが多いです。

親要素に指定するプロパティー一覧

親要素にdisplay:flex;が適応されていないと反映されないのでご注意ください。

アイテムの並び方を変更するflex-direciton
アイテムを右寄せ、左寄せ、中央に配置するjustify-content
アイテムを上揃え、下揃え、中央揃えに配置するalign-items
アイテムを折り返すflex-wrap
複数行になった時の縦方向の並びを指定するalign-content

アイテムの並び方を変更するflex-direction

row（デフォルト）

アイテムを左から右に向かって横向きに配置します。

#container{
 display:flex;
 flex-direction:row;
}

#container{

display:flex;

flex-direction:row;

}

flex要素の並び順_flex-direction_row

row-reverse

アイテムを右から左に向かって横向きに配置します。

#container{
 display:flex;
 flex-direction:row-reverse;
}

#container{

display:flex;

flex-direction:row-reverse;

}

flex要素の並び順flex-direction_row-reverse

column

アイテムを上から下に縦向きに配置します。

#container{
 display:flex;
 flex-drection:column;
}

#container{

display:flex;

flex-drection:column;

}

flex要素の並び順flex-direction_column

column-reverse

アイテムを下から上に縦向きに配置します。

#container{
 display:flex;
 flex-drection:column-reverse;
}

#container{

display:flex;

flex-drection:column-reverse;

}

flex要素の並び順flex-direction_column-reverse

カスタムbox（値を変更することで並び方が変わります）

コードをコピーして貼り付けることでそのまま使用できます！

flex-direction

１

２

３

４

５

アイテムを右寄せ左寄せ中央に配置するjustify-content

flex-start（デフォルト）

アイテムを左寄せにする。

#container{
 display:flex;
 justify-content:felx-start;
}

#container{

display:flex;

justify-content:felx-start;

}

flex要素の並び順flex-content_flex-start

flex-end

アイテムを右寄せにする。

（この時並び順は左から右になる。もし左から右にしたければflex-direction:row-reverse;を指定する必要がある）

#container{
 display:flex;
 justify-content:flex-end;
}

#container{

display:flex;

justify-content:flex-end;

}

flex要素の並び順flex-content_flex-end

center

アイテムを中央寄せにする。

#container{
 display:flex;
 justify-content:centr;
}

#container{

display:flex;

justify-content:centr;

}

flex要素の並び順flex-content_center

space-between

最初と最後ののアイテムを両端に配置し、残りを等間隔で配置する。

#container{
 display:flex;
 justify-content:space-between;
}

#container{

display:flex;

justify-content:space-between;

}

flex要素の並び順flex-content_space-between

space-around

全てのアイテムを等間隔で配置する。

#container{
 display:flex;
 justify-content:space-around;
}

#container{

display:flex;

justify-content:space-around;

}

flex要素の並び順flex-content_space-around

カスタムbox（値を変更することで並び方が変わります）

コードをコピーして貼り付けることでそのまま使用できます！

justify-content

１

２

３

４

５

アイテムを上揃え下揃え中央揃えにするalign-items

stretch（デフォルト）

親要素の高さ、または一番大きい子要素の高さに合わせて子要素を拡大して配置。

#container{
 display:flex;
 align-items:stretch;
}

#container{

display:flex;

align-items:stretch;

}

flex要素の並び順align-items_stretch

flex-start

上揃え。要素のトップラインで揃える。

#container{
 display:flex;
 align-items:felx-start;
}

#container{

display:flex;

align-items:felx-start;

}

flex要素の並び順align-items_flex-start

flex-end

下揃え。要素のアンダーラインで揃える。

#container{
 display:flex;
 align-items:flex-end;
}

#container{

display:flex;

align-items:flex-end;

}

flex要素の並び順align-items_flex-end

center

中央揃え。

#container{
 display:flex;
 align-items:center;
}

#container{

display:flex;

align-items:center;

}

flex要素の並び順align-items_center

baseline

ベースラインで揃えて最初の子要素の位置に配置。

#container{
 display:flex;
 align-items:baseline;
}

#container{

display:flex;

align-items:baseline;

}

flex要素の並び順align-items_baseline

align-items

１

２

３

４

５

アイテムを折り返すflex-wrap

nowrap（デフォルト）

折り返しません。

子要素に幅を指定しており、子要素を横に並べた時、親要素からはみ出る場合は子要素が縮んで親要素に収まるように配置されます。

#container{
 display:flex;
 flex-wrap:nowrap;
}

#container{

display:flex;

flex-wrap:nowrap;

}

flex要素の並び順_flex-wrap_nowrap

wrap

子要素に幅を指定しており、子要素を横に並べた時、親要素からはみ出る場合は折り返して複数行にします。

#container{
 display:flex;
 flex-wrap:wrap;
}

#container{

display:flex;

flex-wrap:wrap;

}

flex要素の並び順flex-wrap_wrap

wrap-revers

折り返して下から上に並べます。

#container{
 display:flex;
 flex-wrap:wrap-revers;
}

#container{

display:flex;

flex-wrap:wrap-revers;

}

flex要素の並び順flex-wrap_wrap-revers

wrapは親要素から子要素がはみ出る場合に折り返しをします。

下のデモは各子要素の幅を１００pxにしてあります。

親要素の幅も３５０px、２５０px、１５０pxと変更できるので、親要素の幅で子要素がどう配置されるのかを試してみてください。wrapを指定していれば、親要素の幅に合わせて折り返してくれるはずです。

wrapを指定しておけばpc表示からスマホ表示になっても自動で配置を適切に切り替えてくれるからレスポンシブサイトを作る時によく使われるよ。

flex-wrap

子要素の幅を100pxに指定しています。

１

２

３

４

５

複数行になった時の縦方向の並びを指定するalign-content

stretch（デフォルト）

親要素の高さに合わせて子要素が拡大されて配置。

#container{
 display:flex;
 align-content:stretch;
}

#container{

display:flex;

align-content:stretch;

}

flex要素の並び順align-content_stretch

flex-start

上揃え。

#container{
 display:flex;
 align-content:flex-start;
}

#container{

display:flex;

align-content:flex-start;

}

flex要素の並び順align-content_flex-start

flex-end

下揃え。

#container{
 display:flex;
 align-content:flex-end;
}

#container{

display:flex;

align-content:flex-end;

}

flex要素の並び順align-content_flex-end

center

中央揃え。

#container{
 display:flex;
 align-content:center;
}

#container{

display:flex;

align-content:center;

}

flex要素の並び順align-content_center

space-between

一番上の行と一番下の行を上下に配置し、のこりの行を等間隔で配置。

#container{
 display:flex;
 align-content:space-between;
}

#container{

display:flex;

align-content:space-between;

}

flex要素の並び順align-content_space-between

space-around

全ての行を等間隔で配置。

#container{
 display:flex;
 align-content:space-around;
}

#container{

display:flex;

align-content:space-around;

}

flex要素の並び順align-content_space-around

align-contentはwrapを有効にしていないと適応されません。

flex-wrap

align-content

１

２

３

４

５

子要素に指定するプロパティー一覧

親要素にdisplay:flex;が指定されていないと反映されないので注意してください。

子要素一つ人つに設定を行うプロパティーですので全体ではなく各アイテムそれぞれを細かく位置決めすることができます。

子要素の並びを指定するorder
子要素の伸びる比率を指定するflex-grow
子要素の縮む比率を指定するflex-shrink
子要素のべース幅を指定するflex-basis
子要素それぞれの垂直方向の位置を指定するflex-self

子要素の並び順を指定するorder

基本はhtmlでの記載順だが任意のページでは違う並べ方をしたい、レコメンドの順番を変えたい。などある時に使われます。

子要素のidまたはclass名＋本来の並び順の番号をセレクタ部分に記載して、{}ないにorder＋変更後の順番号を記載します。

order:１or２or３・・・

#container{
 display:flex;
}

.item1{order:3;}
.item2{order:1;}
.item3{order:5;}
.item4{order:2;}
.item5{order:4;}

#container{

display:flex;

}

.item1{order:3;}

.item2{order:1;}

.item3{order:5;}

.item4{order:2;}

.item5{order:4;}

flex要素の並び順order

子要素の伸びる比率を指定するfelx-grow 子要素の縮む比率を設定するfelx-shrink

ヘッダー部分の・ロゴ・サイト名・メニューバーのエリアを作る際、ブラウザを拡大縮小したときにどのようなデザインにするかを設定するのによく使われます。

指定した数字の比率で伸び縮みします。

flex-grow１or２or３・・・
felx-shrink１or２or３・・・

#container{
display:flex;
} 

.item1{flex-grow:1;} 
.item2{flex-grow:1.5;} 
.item3{flex-grow:3;}

#container{

display:flex;

}

.item1{flex-grow:1;}

.item2{flex-grow:1.5;}

.item3{flex-grow:3;}

flex要素の並び順flex-grow

子要素のベースの幅を指定するflex-basis

上記のflex-grow,shrinkは親要素が伸び縮みしたらどうするか設定するプロパティでした。ということは伸び縮みする前の元が必ずあります。

その元（ベース）の状態での子要素の幅を設定するのがflex-basisです。

ヘッダー部分の・ロゴ・サイト名・メニューバーのエリアを作るときによく使用されます。

flex-basis１０%or２０%or３０%・・・

#container{ 
　display:flex; 
}
 
.item1{flex-basis:20%;}
.item2{flex-basis:30%;}
.item3{flex-basis:50%;}

#container{

　display:flex;

}

.item1{flex-basis:20%;}

.item2{flex-basis:30%;}

.item3{flex-basis:50%;}

flex要素の並び順flex-basis

子要素それぞれの垂直方向の位置を指定するalign-self

上下中央揃えをするalign-itemsとは違い、子要素それぞれを上、下、中央どちらに配置をするかを指定するプロパティーです。

align-self

auto:align-itemsの値を継承
start:上
end:下
center:中央
baselne:ベースライン
stretch:上下に余白があれば伸びて配置

#container{ 　
　display:flex;
}
.item1{align-self:start;}
.item2{align-self:end;}
.item3{align-self:center;}

#container{ 　

　display:flex;

}

.item1{align-self:start;}

.item2{align-self:end;}

.item3{align-self:center;}

flex要素の並び順align-self