目次
FlexBox
説明
複雑な配置を簡単に行えるようにするために使われる。
書き方
display: flex;
Flexboxを使うには、まず親要素に display: flex; を指定する
主軸と交差軸
Flexboxのレイアウトには「主軸」と「交差軸」という2つの軸があり、これが非常に重要。
-
主軸（デフォルトでは横方向、左から右）
→子要素が並ぶ方向。 -
交差軸（デフォルトでは縦方向）
→主軸と直交する方向。
主要プロパティ
flex-direction
説明
主軸の方向を決める。要素がどちらの方向に並ぶかを制御できる。
書き方
デフォルトは row（左から右に横並び）。
例えば、flex-direction: column; とすると、縦に並ぶ。
justify-content
説明
主軸に沿って、要素をどのように配置するかを指定する。
書き方
-
flex-start: 左寄せ（デフォルト）。 -
flex-end: 右寄せ。 -
center: 中央に配置。 -
space-between: 要素の間に均等なスペースを入れる（両端はくっつく）。 -
space-around: 要素の周りにスペースを入れる（両端にも半分のスペースが入る）。
align-items
説明
交差軸に沿って、要素をどう整列させるかを決める。
書き方
-
flex-start: 上寄せ。 -
flex-end: 下寄せ。 -
center: 中央に配置。 -
stretch: 要素の高さを均等に引き伸ばす（デフォルト）。
flex-wrap
説明
要素が一行に収まりきらない場合に、どう配置するかを指定する。
書き方
デフォルトは nowrap（折り返しなし）。
flex-wrap: wrap; と指定すると、要素が折り返されて次の行に配置される。
align-content
説明
Flexboxの要素が複数行にまたがる場合（つまり、flex-wrapが指定されている時）に、交差軸の方向で各行全体の配置を決めるプロパティ。
書き方
-
center: 各行を交差軸の中央に寄せる。 -
flex-start: 各行を交差軸の始点に寄せる（上寄せ）。 -
flex-end: 各行を交差軸の終点に寄せる（下寄せ）。 -
space-between: 行と行の間に均等なスペースを配置（端は詰まる）。 -
space-around: 行と行の周りに均等なスペースを配置（端も半分のスペースができる）。
align-self
説明
個別の要素に対して交差軸方向の整列方法を指定するプロパティ。
書き方
-
auto: 親要素のalign-itemsの設定に従う（デフォルト）。 -
flex-start: 要素を交差軸の始点（上寄せ）。 -
flex-end: 要素を交差軸の終点（下寄せ）。 -
center: 要素を中央に揃える。
例
要素の並びや配置の方法を変更
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
</div>
/* コンテナの設定（青色背景の中に対して） */
.container {
display: flex;
flex-direction: row; /* デフォルトの左から右の横並び */
justify-content: space-around; /* 主軸（横）に沿って要素を均等に配置 */
align-items: center; /* 交差軸（縦）に沿って要素を中央に配置 */
flex-wrap: wrap; /* 要素が多ければ次の行に折り返す */
}
/* 各ボックスのスタイル（赤色ボックスの中に対して） */
.box {
flex-basis: 100px; /* ボックスの基本の幅を設定 */
flex-grow: 1; /* 余ったスペースを均等に広げる */
}
/* align-selfの使用例：3番目のボックスだけ下に下げる */
.box3 {
align-self: flex-end;
}
/* widthとかは省略 */
スペースが足りない時にどう縮めるか、余ってる時にどうのばすかのプロパティ
flex-basis
説明
widthやheightみたいな役割。
widthとの違いはflex-basisは主軸の向きで大きくなる方向（縦なのか横なのか）が変わる。
書き方
.box {
flex-basis: 200px; /* 主軸方向の初期のサイズを200pxにする */
}
flex-grow
説明
余ったスペースをどうするかを設定できる
書き方
1番目と5番目のボックスにそれぞれflex-grow: 1;を設定すると、余白部分を1番目と5番目のボックスが均等に埋める。
.box:nth-of-type(1),
.box:nth-of-type(5) {
flex-grow: 1; /* 余ったスペースを均等に分けて埋める */
}
-
0: 要素はスペースを伸ばさない（デフォルト）。 -
1~: 要素が余ったスペースを均等に埋める（値が大きいほどより多くのスペースを埋める）。
flex-shrink
説明
スペースが足りない時にどう要素を縮めるか
0は何も動かなくなる
画面を縮めた時にどれを先に小さくするか指定できる
レスポンシブ書く時によく使えそう
書き方
例えば、1番目のボックスが縮まないようにしたい場合は、flex-shrink: 0;と指定することで、他の要素が縮んでも1番目のボックスは縮まないようにできる。
.box:nth-of-type(1) {
flex-shrink: 0; /* 1番目のボックスは縮まない */
}
省略形プロパティ flex
説明
flex-grow、flex-shrink、flex-basis の値をまとめて指定できる省略形。
書き方
- 3つの値（
grow/shrink/basis）：flex: 1 1 100px; - 2つの値 単位あり（
grow/basis）：flex: 1 100px; - 2つの値 単位なし（
grow/shrink）：flex: 1 1; - 1つの値（
grow）：flex: 1;
メディアクエリー
説明
レスポンシブデザインのためのcss
使用例
デバイス毎にcssを変える
/* 小型デバイス（576px以上のとき） */
@media (min-width: 576px) { ... }
/* 中型デバイス（768px以上のとき） */
@media (min-width: 768px) { ... }
/* 大型デバイス（992px以上のとき） */
@media (min-width: 992px) { ... }
/* 特大デバイス（1200px以上のとき） */
@media (min-width: 1200px) { ... }
/* 超特大デバイス（1400px以上のとき） */
@media (min-width: 1400px) { ... }
書き方
-
max-widthとmin-width@media (max-width: 768px) { /* 768px以下の場合のスタイル */ } @media (min-width: 768px) { /* 768px以上の場合のスタイル */ } -
orientation@media (orientation: landscape) { /* 横向きの時に適用するスタイル */ }
メモ
flexとメディアクエリを使うことで画面が小さくなった時にナビゲーションバーを横積みから縦積みにすることができる