フレックスボックスを使ってレイアウトする場合、主軸と交差軸を意識する必要があります。主軸と交差軸意識しながらアイテムの並び方を確認していきます。
display: flex の使い方を知りたい
主軸と交差軸意識しながらアイテムの並び方を確認していきます
フレックスコンテナを作成
親要素にdisplay: flex; を指定するとフレックスコンテナに指定ができ、子要素がフレックスアイテムになります。フレックスコンテナにプロパティを追加して、その中のフレックスアイテムの並び方を確認します。
html
<div class="ex">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
親要素のexクラスに display: flex; を指定します。
.ex {
display: flex;
}
アイテムは水平方向（主軸）に横並びになります。
主軸に関するプロパティ flex-direction: を指定しないとデフォルトでは flex-direction: row; が適用され、主軸が水平方向になります。
主軸に関するプロパティ
flex-direction:
- flex-direction: row; → 水平
- flex-direction: row-reverse; → 水平（逆）
- flex-direction: column; → 垂直
- flex-direction: column-reverse; → 垂直（逆）
flex-direction: row-reverse;
flex-direction: row-reverse; を指定すると水平方向の主軸の末尾側からアイテムが並びます。
.ex {
display: flex;
flex-direction: row-reverse;
}
flex-direction: column;
flex-direction: column; を指定すると主軸が垂直方向になります。
.ex {
display: flex;
flex-direction: column;
}
主軸の先頭から垂直にアイテムが並びます。
折返しに関するプロパティ
デフォルトでは折返さない flex-wrap: nowrap; が指定されています。
- flex-wrap: nowrap; → 折り返さない
- flex-wrap: wrap: → 折り返す
- flex-wrap: wrap-reverse → 折り返す（逆）
※主軸方向のアイテムの大きさに関しては、アイテムにプロパティを指定する必要があり後ほど出てきます。
主軸方向のアイテムの並びに関するプロパティ
justify-content:
justify-content: プロパティで主軸方向のアイテムの並びを指定できます。
- justify-content: flex-start; → アイテムを先頭に寄せます
- justify-content: flex-end; → アイテムを末尾に寄せます
- justify-content: space-around; → 各アイテムを均等に配置し各アイテムの両側に半分の大きさの間隔を置く
- justify-content: space-between; → 各アイテムを均等に配置し最初のアイテムは先頭に寄せ、最後のアイテムは末尾に寄せる
- justify-content: center; → 中央に寄せる
- etc.
※アイテムを一つ又は複数を寄せる場合にはアイテムにプロパティを指定する必要があり、後ほどでてきます。
交差軸方向のアイテムの並びに関するプロパティ
align-items:
交差軸方向のアイテムの配置
- align-items: stretch; → 引き伸ばし （初期値）
- align-items: center; → 中央に寄せる
- align-items: flex-start; → 先頭に寄せる
- align-items: flex-end; → 末尾に寄せる
align-items: center; 親の中央にアイテムを配置したい場合などに使います。
適用するには交差軸方向の親コンテナの幅が必要になります。
align-content:
交差軸方向の空間内部のアイテムの配置を指定、アイテムが折り返した場合に効果が出ます。
- align-content: center; → 中央に配置
- align-content: flex-start → 先頭に配置
- align-content: flex-end → 末尾に配置
- align-content: space-around → アイテムを均等に配置し各アイテムの両側に半分の大きさの間隔を置く
- align-content: space-between → アイテムを均等に配置し最初のアイテムは先頭に寄せ、最後のアイテムは末尾に寄せる
- etc.
align-items と align-content の比較
この２つのプロパティはアイテムが折り返して、複数行のフレックスコンテナーになった際に違いがでます。
align-items: は複数行のフレックスコンテナーに対応しておらず、行ごとにアイテムが寄せられています。一方 align-content: は適応対象が複数行のフレックスコンテナなので、アイテムがコンテナを基準に配置されています。
align-self:
特定のアイテムにだけalign-itemsを使いたい場合は、アイテムに対して align-self: を使います。
アイテムを寄せる
アイテムにプロパティを指定して、アイテムを一つ又は複数を寄せていきます。
.ex {
display: flex;
}
.ex>.item2 {
margin-right: auto;
}
アイテム２に margin-right: auto; を指定すると、アイテム３との間に余白ができ左右に寄せられます。
アイテム３に margin-left: auto; を指定した場合でもアイテム2との間に余白ができ、同じ見た目になります。
.ex>.item3{
margin-right: auto;
}更にアイテム３に margin-right: auto; を指定すると、アイテム３の両側に同じサイズの余白ができます。
アイテムのサイズ
flex-basis:
アイテムに flex-basis: を指定すると、アイテムのサイズの基準を指定できます。
.ex {
display: flex;
}
.ex>.item1, .ex>.item2,.ex>.item3 {
flex-basis: 150px;
}
flex-grow:
親のコンテナの余白がある場合のアイテムのサイズを指定します。初期値は0で余白があってもアイテムは基本の大きさ以上にはなりません。
フレックス伸長係数の比率を指定すると、余白部分が比率で分配されます。
.ex {
display: flex;
}
.ex>.item1{
flex-basis: 150px;
flex-grow: 1;
}
.ex>.item2{
flex-basis: 150px;
flex-grow: 2;
}
.ex>.item3 {
flex-basis: 150px;
flex-grow: 1;
}
余白が 1 : 2 : 1 でアイテムに分配されます。
flex-shrink:
アイテムがコンテナより大きい場合のアイテムのサイズを指定します。初期値は 1 でコンテナのサイズに合わせてアイテムも縮小します。
0 の場合はbasisに指定したサイズから縮小されず、コンテナから突き抜けます。
フレックスアイテムの縮小係数
.ex {
display: flex;
}
.ex>.item1{
flex-basis: 150px;
flex-grow: 1;
flex-shrink: 1;
}
.ex>.item2{
flex-basis: 150px;
flex-grow: 2;
flex-shrink: 2;
}
.ex>.item3 {
flex-basis: 150px;
flex-grow: 1;
flex-shrink: 1;
}
不足している分から 1 : 2 : 1 の比率で縮小されます。
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>flex-layout</title>
</head>
<body>
<div class="container">
<p>block</p>
<div class="ex">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>flex</p>
<div class="ex-1">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>flex-direction</p>
<p>row</p>
<div class="ex-2">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>row-reverse</p>
<div class="ex-3">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>column</p>
<div class="ex-4">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>column-reverse</p>
<div class="ex-5">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>flex-wrap</p>
<p>nowrap</p>
<div class="ex-6">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>wrap</p>
<div class="ex-7">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>wrap-reverse</p>
<div class="ex-8">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>justify-content</p>
<p>flex-start</p>
<div class="ex-9">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>flex-end</p>
<div class="ex-10">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>space-around</p>
<div class="ex-11">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>space-between</p>
<div class="ex-12">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>center</p>
<div class="ex-13">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>align-items</p>
<p>stretch</p>
<div class="ex-14">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>center</p>
<div class="ex-15">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>flex-start</p>
<div class="ex-16">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>flex-end</p>
<div class="ex-17">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>align-content</p>
<p>center</p>
<div class="ex-18">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>flex-start</p>
<div class="ex-19">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>flex-end</p>
<div class="ex-20">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>space-around</p>
<div class="ex-21">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>space-between</p>
<div class="ex-22">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<!-- 比較 -->
<p>align-items: center</p>
<div class="ex-15">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>align-content: center</p>
<div class="ex-18">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>align-items: flex-start</p>
<div class="ex-16">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>align-content: flex-start</p>
<div class="ex-19">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>item propety</p>
<p>order</p>
<div class="ex-23">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>margin:auto;</p>
<div class="ex-24">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>flex-grow</p>
<div class="ex-25">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>flex-shrink</p>
<div class="ex-26">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>flex-basis</p>
<div class="ex-27">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
<p>align-self</p>
<div class="ex-28">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--first-color: rgb(65, 65, 150);
--second-color: rgb(36, 36, 53);
--white-color: rgb(250, 250, 250);
--black-color: rgb(22, 22, 22);
--text-color: rgb(50, 50, 50);
--bg-color: rgb(240, 240, 240);
--shadow: 2px 8px 16px rgba(0, 0, 0, 0.08);
}
/*=== Font ratio ===*/
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
@media screen and (max-width: 768px) {
html {
font-size: 58.5%;
/* 15px */
/* font-size: 54.6%; 14px */
}
}
body {
font-size: 1.6rem;
background: var(--bg-color);
line-height: 1.5;
}
.container {
max-width: 640px;
margin: 50px auto;
background: var(--white-color);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
}
.container>div {
margin: 20px;
border: 1px solid red;
}
.container>p {
font-size: 1.6rem;
color: var(--text-color);
margin: 10px 20px;
font-weight: 600;
}
.item1, .item2, .item3 {
padding: 10px 20px;
background: var(--bg-color);
border: 1px solid #ccc;
text-align: center;
/* width: 200px; */
}
.ex {
display: block;
}
.ex-1 {
display: flex;
}
.ex-2 {
display: flex;
flex-direction: row;
}
.ex-3 {
display: flex;
flex-direction: row-reverse;
}
.ex-4 {
display: flex;
flex-direction: column;
}
.ex-4 .item1 {
flex-basis: 25px;
}
.ex-5 {
display: flex;
flex-direction: column-reverse;
}
.ex-6 .item1, .ex-6 .item2, .ex-6 .item3,
.ex-7 .item1, .ex-7 .item2, .ex-7 .item3,
.ex-8 .item1, .ex-8 .item2, .ex-8 .item3
{
flex-basis: 220px;
flex-grow: 0;
flex-shrink: 1;
}
.ex-6 {
display: flex;
flex-wrap: nowrap;
}
.ex-7 {
display: flex;
flex-wrap: wrap;
}
.ex-8 {
display: flex;
flex-wrap: wrap-reverse;
}
.ex-9 {
display: flex;
justify-content: flex-start;
}
.ex-10 {
display: flex;
justify-content: flex-end;
}
.ex-11 {
display: flex;
justify-content: space-around;
}
.ex-12 {
display: flex;
justify-content: space-between;
}
.ex-13 {
display: flex;
justify-content: center;
}
.ex-14, .ex-15, .ex-16, .ex-17, .ex-18, .ex-19, .ex-20, .ex-21, .ex-22 {
height: 120px;
}
.ex-14 {
display: flex;
align-items: stretch;
flex-wrap: wrap;
}
.ex-15 {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.ex-16 {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.ex-17 {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
}
.ex-18 {
display: flex;
flex-wrap: wrap;
align-content: center;
}
.ex-19 {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.ex-20 {
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}
.ex-21 {
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
.ex-22 {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.ex-23 {
display: flex;
}
.ex-23>.item1 {
order: 3;
}
.ex-23>.item2 {
order: -1;
}
.ex-23>.item3 {
order: 0;
}
.ex-24 {
display: flex;
}
.ex-24>.item2 {
margin-right: auto;
}
.ex-24>.item3{
margin-right: auto;
}
.ex-25 {
display: flex;
/* flex-wrap: wrap; */
}
/* .ex-25>.item1 {
flex-grow: 1;
flex-basis: 200px;
}
.ex-25>.item2 {
flex-grow: 2;
flex-basis: 200px;
} */
.ex-25>.item1, .ex-25>.item2,.ex-25>.item3 {
flex-basis: 150px;
flex-grow: 0;
}
.ex-25>.item1 {
flex-shrink: 1;
}
.ex-25>.item2 {
flex-shrink: 2;
}
.ex-25>.item3 {
flex-shrink: 1;
}
.ex-26 {
display: flex;
}
.ex-26>.item1 {
flex-shrink: 1;
flex-basis: 200px;
}
.ex-26>.item2 {
flex-shrink: 2;
flex-basis: 200px;
}
.ex-27 {
display: flex;
}
.ex-27>.item1 {
flex-grow: 0;
flex-basis: 200px;
}
.ex-27>.item2 {
flex-grow: 1;
flex-basis: auto;
}
.ex-28 {
height: 200px;
display: flex;
align-items: center;
}
.ex-28>.item1 {
align-self: flex-start;
}
.ex-28>.item3 {
align-self: flex-end;
}
