「HOME」や「ABOUT」など、各ページへのリンクメニューを横並びにする場合を思い浮かべてください。この場合、横並びにしたいアイテムの高さが異なってしまうということは考えづらいので、横並びにした上で高さを揃えるという必要はありません。前回の記事で紹介した横並びの配置テクニックだけでもなんとかなります。
では次に、写真とそのタイトル・説明文を横並びにする場合を思い浮かべてみてください。一言で済むような場合だと、文章のスペースは写真の大きさより小さくなるでしょうし、長文で解説が必要な場合は写真よりも大きなスペースが必要となります。
そういった場合、「横並びにした上で、さらに高さの位置調整が必要となる」ことが多いです。
こうした方が良いのか
こうした方が良いのか
こうした方が良いのか
というように、高さが違うというだけで色々なパターンが考えられます。
そこで今回紹介するのが、
要素を横並びにした上でアイテムの高さの位置を調整できるCSSです！
細かな位置調整はpositionプロパティを使っても行うことができましたが、基本的に、コンテンツの配置でpositionプロパティを使うのは最後の手段です。なぜかというと、子孫要素に与える影響が大きく、配置崩れを起こしてしまう原因になることもあるからです。（使わない方が良いとまで言いたいわけではないですが）
ともかく、display: flex; で横並びにしたアイテムの高さの位置を調整できるCSSが用意されているのですから、これを使わない手はありませんよね。
横並び配置（display: flex;）、横並びの位置指定（justify-content）、横並び＋高さの位置調整（align-items,align-self）の３つをマスターすれば、フレックスボックスの基礎はバッチリですよ！
◆ align-items とは ◆
align-items（アラインアイテムズ）とは、display: flex; などで横並びにしたアイテムの高さの位置を一括で指定するCSSプロパティです。
display: flex;、justify-contentと同じく、横並びにしたい要素そのものではなく、親要素に設定します。
値も justify-content と似たようなキーワード値を取り、center、flex-start、flex-end…といったものがあります。
＊align-itemsの構文＊
■ セレクタ { align-items: center ; }
また、キーワード値は以下のようなものがあります。
＊align-itemsのキーワード値と効果＊
| キーワード値 | 効果 |
| center | 中央に配置する |
| flex-start | 上に寄せる |
| flex-end | 下に寄せる |
| stretch | 一番縦に長いアイテムに引き伸ばして揃える。 heightが固定値で設定されていると無効 |
justify-contentの時もそうでしたが、言葉ではイメージしづらいものもあるので、実際にどのように配置されるか試して確認するのが一番良いと思います。
再び、display: flex; だけを設定して横並びにしたボックスと、それぞれの効果が適用されるボタンを用意しました。
配置がどう変わるか、対応するボタンを押して実験してみてくださいね！
改行１行
改行２行
高さ調整
改行
３行
高さ調整
heightで高さを固定値で設定すると「align-items: stretch」が効かなくなってしまうので、ここでは文章の行数（改行）によってアイテムの高さに差を出しています。heightを固定値で設定していても、centerなど他の値は有効です。
まぁ、height:100px; って固定してるのに、align-items: stretch; で引き伸ばされてしまったら、そっちの方が不都合ですからね。
align-items: stretch; が効かないなと思った時は、アイテムにheightが設定されていないかどうかを確認すると良いでしょう。
- POINT!
- ・align-items は、flex などで横並びにしたアイテムの高さの位置を一括指定できるプロパティ！
- ・align-items も justify-content と同じく、center や flex-start などのキーワード値で指定する！
◆ １つのアイテムだけ高さの位置を調整したい場合 ◆
先ほどご紹介した方法（align-items）は、横並びにしたフレックスアイテムの縦方向の位置が全て一括で調整されるので便利ですが、一部のアイテムだけ位置を調整したいという場合も考えられます。
そんな時に役に立つのが、
「align-self」プロパティです！
align-itemsプロパティは、display: flex; を設定した親要素に記述しますが、align-selfプロパティは「調整を加えたい子要素（フレックスアイテム）」に設定します。
また、値は align-items とほとんど同じキーワード値をとります。
＊ align-self の構文＊
■ セレクタ { align-self: center; }
それではサンプルコードと、切り替え機能付き表示結果を確認していきましょう！
<div id="samplebigflexbox">
<div class="sampleflex1">box1</div>
<div class="sampleflex2">box2<br>改行１行</div>
<div class="sampleflex3">box3<br>改行２行<br>高さ調整</div>
<div class="sampleflex4">box4<br>改行<br>３行<br>高さ調整</div>
</div>
#samplebigflexbox {
display: flex;
}
.sampleflex1 {
background-color:skyblue;
width:25%;
align-self: center; /*フレックスアイテムに指定する*/
}
.sampleflex2 {
background-color:lightgreen;
width:25%;
}
.sampleflex3 {
background-color:lightyellow;
width: 25%;
}
.sampleflex4 {
background-color:yellowgreen;
width: 25%;
}
改行１行
改行２行
高さ調整
改行
３行
高さ調整
フレックスアイテムの縦方向の位置調整が一括でまとめてされてしまうと困る場合は、このように個別に位置調整することで解決できます。
CSSに慣れないうちは、「位置調整＝positionプロパティ」と考えてしまいがちなのですが、要素の配置・位置を調整する方法は色々あるので最善の方法を選択できるようになることが大切です！
- POINT!
- ・align-selfプロパティで、フレックスアイテムの縦方向の位置調整を個別にできる！
- ・align-selfプロパティは、親要素ではなく子要素（フレックスアイテム）に設定する！
- ・値はキーワード値をとり、align-itemsとほとんど同じ！
◆ ど真ん中に配置（flexの応用） ◆
前回の記事で、display: flex; と、justify-content: center; で、要素をバシッと中央配置できるテクニックを紹介しましたが、さらに今回紹介した align-items: center; を組み合わせることで、中央だけでなくど真ん中に配置することも可能です。
要するに、「横方向の中央」と「縦方向の中央」の両方を設定するということですね。
それでは早速、サンプルコードと表示結果を紹介しましょう。
<div class="domannaka">
<p>これをど真ん中に配置したい</p>
</div>
.domannaka {
height: 100px;
background-color: darkblue;
display: flex;
justify-content: center;
align-items: center;
}
.domannaka p {
font-size: 0.75rem;
width: fit-content;
background-color: lightyellow;
padding:10px;
}
これをど真ん中に配置したい
このように、横並びにしたいわけじゃない場合でも display: flex; とその配置調整プロパティである、justify-content、align-items は使い方次第で色々と応用ができます。
横方向への中央配置だけなら他にも色々方法がありますが（※詳しくは、「要素の中央配置の記事」をご覧ください）、縦方向にも中央に配置したい時は、このやり方を覚えておくと役に立ちますよ！
- POINT!
- ・display: flex; justify-content: center; align-items: center; を組み合わせることで、要素を横＋縦の中央（ど真ん中）に配置できる！
- ・子要素（フレックスアイテム）が１つだけでも設定可能！
