レイアウトを組むのに便利なflexboxについて解説します。
display:flexの表示を確認
index.htmlを以下のように書き換えてください。
<!-- 省略 -->
<body>
<div class="container">
<div class="box1">
<p>
この中にテキストが入ります。<br>
この中にテキストが入ります。
</p>
</div>
<div class="box2">
<p>
この中にテキストが入ります。
</p>
</div>
<div class="box3">
<p>
この中にテキストが入ります。<br>
この中にテキストが入ります。<br>
この中にテキストが入ります。
</p>
</div>
</div>
</body>
<!-- 省略 -->ボックスの高さがどのように変化するかを確認するために、行数の異なるテキストを入れています。
次に、style.cssを以下のように書き換えてください。
.container {
display: flex;
border: 1px solid #333;
}
.box1 {
background-color: #ddd;
}
.box2 {
background-color: #ccc;
}
.box3 {
background-color: #bbb;
}表示を確認すると、ボックスは横並びになりました。
行数が異なるにも関わらず、ボックスは全て同じ高さになっています。
display:flexを指定すると、以下で紹介するプロパティが使えるようになり、さまざまなレイアウトが組めるようになります。
align-items
子要素が横並びになっている場合、align-itemsは子要素の縦方向の配置を決定します。
以下のようにalign-items: flex-start;を追加してください。
.container {
display: flex;
align-items: flex-start;
border: 1px solid #333;
}
.box1 {
background-color: #ddd;
}
.box2 {
background-color: #ccc;
}
.box3 {
background-color: #bbb;
}要素の高さはコンテンツに応じて変わるようになり、上寄せになりました。
その他、centerやflex-endを指定してみて、挙動を確認してみてください。
align-items: center;align-items: flex-end;centerにすると縦方向に中央、flex-endにすると下寄せになります（子要素が横並びになっている場合）。
justify-content
子要素が横並びになっている場合、justify-contentは子要素の横方向の配置を決定します。
align-itemsを削除し、以下のようにjustify-contentを追加してください。
.container {
display: flex;
justify-content: center;
border: 1px solid #333;
}
.box1 {
background-color: #ddd;
}
.box2 {
background-color: #ccc;
}
.box3 {
background-color: #bbb;
}子要素が中央に配置されました。
flex-startは左寄せ、flex-endは右寄せになります（子要素が横並びになっている場合）。
justify-content: flex-start;justify-content: flex-end;次に、space-betweenを指定してみてください。
.container {
display: flex;
justify-content: space-between;
border: 1px solid #333;
}
.box1 {
background-color: #ddd;
}
.box2 {
background-color: #ccc;
}
.box3 {
background-color: #bbb;
}子要素が両端に広がり、均等に配置されるようになりました。
他にも、各アイテムを均等に配置し各アイテムの両側に半分の大きさの間隔を置くspace-around、
justify-content: space-around;各アイテムを均等に配置し、各アイテムの周りに同じ大きさの間隔を置くspace-evenlyなどがあります。
justify-content: space-evenly;flex-direction
flex-directionで子要素が並ぶ方向を変えられます。
以下のようにjustify-contentを削除し、flex-directionを追加してください。
.container {
display: flex;
flex-direction: column;
border: 1px solid #333;
}
.box1 {
background-color: #ddd;
}
.box2 {
background-color: #ccc;
}
.box3 {
background-color: #bbb;
}この状態で、align-itemsを指定してみましょう。
.container {
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #333;
}
.box1 {
background-color: #ddd;
}
.box2 {
background-color: #ccc;
}
.box3 {
background-color: #bbb;
}子要素はコンテンツの幅になり、中央に配置されました。
flexboxで要素が縦に並ぶ場合、align-itemsは横方向の配置になります。
flex-wrap
flex-wrapは折り返しを設定するプロパティです。
style.cssを以下のように書き換えてください。
.container {
display: flex;
border: 1px solid #333;
}
.box1, .box2, .box3 {
width: 50%;
}
.box1 {
background-color: #ddd;
}
.box2 {
background-color: #ccc;
}
.box3 {
background-color: #bbb;
}widthを50%にすると、それぞれのボックスの幅は親要素の半分になるはずが、表示では3分の1のサイズ（33.3333…%）になっています。
以下のように、flex-wrap:wrapを指定してみます。
.container {
display: flex;
flex-wrap: wrap;
border: 1px solid #333;
}
.box1, .box2, .box3 {
width: 50%;
}
.box1 {
background-color: #ddd;
}
.box2 {
background-color: #ccc;
}
.box3 {
background-color: #bbb;
}各要素の幅は半分（50%）になり、3つ目のボックスは折り返されて下になりました。
flex-wrapの初期値はnowrap（折り返さない）ですので、折り返したい場合はwrap（折り返す）を指定しましょう。
flex-grow
flex-growの表示を確認していきます。
flex-growは、フレックスボックスの子要素（フレックスアイテム）に指定するプロパティです。
style.cssを以下のように書き換えてください。
.container {
display: flex;
border: 1px solid #333;
}
.box1 {
background-color: #ddd;
flex-grow: 1;
}
.box2 {
background-color: #ccc;
flex-grow: 1;
}
.box3 {
background-color: #bbb;
flex-grow: 1;
}子要素のブロックが同じ幅になりました。
次に、.box2のflex-growを2にしてみます。
.container {
display: flex;
border: 1px solid #333;
}
.box1 {
background-color: #ddd;
flex-grow: 1;
}
.box2 {
background-color: #ccc;
flex-grow: 2;
}
.box3 {
background-color: #bbb;
flex-grow: 1;
}こうすると、box2クラスの要素の幅が他のボックスより広くなりました。
では、.box1と.box2のflex-growを削除するとどのように表示されるでしょうか。
.container {
display: flex;
border: 1px solid #333;
}
.box1 {
background-color: #ddd;
}
.box2 {
background-color: #ccc;
}
.box3 {
background-color: #bbb;
flex-grow: 1;
}.box1と.box2の要素はコンテンツに合わせた幅になりますが、.boxの要素は余白を埋める形で右端まで表示されます。
flex-growは以下のように書くこともできます。
flex: 1;flexはflex-grow、flex-shrink、flex-basisのショートハンドで、単位のない数値を一つだけ入れるとflex-growと同様になります（flex-shrink、flex-basisはあまり使わないので説明は割愛します）。