CSS3でフレックスアイテムを交差軸（クロス軸）に沿って整列する方法
CSS3でフレックスボックス内のアイテムを交差軸（クロス軸）に沿って整列させるには、align-itemsプロパティを使用します。このプロパティは、主軸に対して垂直な方向である交差軸上でのアイテムの配置位置を制御します。
align-itemsプロパティの主な値
- stretch（初期値）：コンテナの高さに合わせてアイテムを引き伸ばして表示します
- center：交差軸の中央にアイテムを配置します
- flex-start：交差軸の始端にアイテムを配置します
- flex-end：交差軸の終端にアイテムを配置します
- baseline：テキストのベースラインに合わせてアイテムを配置します
コード例
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
height: 200px;
display: flex;
width: 100%;
align-items: center;
border: 2px solid red;
}
div {
width: 100px;
height: 100px;
color: white;
text-align: center;
font-size: 30px;
}
.first {
background-color: rgb(55, 0, 255);
}
.second {
background-color: red;
}
.third {
background-color: rgb(140, 0, 255);
}
</style>
</head>
<body>
<h1>Align flex items along cross axis</h1>
<div class="container">
<div class="first">First Div</div>
<div class="second">Second Div</div>
<div class="third">Third Div</div>
</div>
</body>
</html>
実行結果
上記のコードを実行すると、次のような出力が得られます。
この例では、コンテナ要素にdisplay: flexを指定してフレックスボックスを有効化し、さらにalign-items: centerを設定することで、3つのdiv要素がコンテナの垂直方向（交差軸）の中央にきれいに整列しています。赤い枠線のコンテナ内で、各カラフルなボックスが上下中央に配置されているのが確認できます。
-
CSS3のFlexbox（フレックスボックス）レイアウトを徹底解説
Flexboxとは？ CSS3には「Flexible Box」、通称Flexbox（フレックスボックス）と呼ばれるレイアウトモードが用意されています。Flexboxを活用することで、これまではfloatやpositioningなどのテクニックを駆使しなければ実現できなかった、複雑なWebアプリケーションやWebページのレイアウトを、シンプルな記述で簡単に構築できるようになります。 Flexboxは「フレックスコンテナ」と「フレックスアイテム」という2つの要素で構成されます。display: flex; を指定した要素がコンテナとなり、その直下の子要素が自動的にフレックスアイテムとして扱われます
-
CSS FlexboxでDIV要素を左・中央・右に配置する方法｜justify-contentの使い方
CSSのjustify-contentプロパティを使用すると、フレックスコンテナの主軸方向（デフォルトでは水平方向）に沿って子要素の間や周囲のスペースを分配し、柔軟に配置を制御できます。本記事では、複数のDIV要素を「左・中央・右」のように分散配置する方法を、具体的なコード例と表示結果とともにわかりやすく解説します。 justify-contentプロパティの構文 justify-contentは、display: flex;を指定した親要素（フレックスコンテナ）に対して設定します。基本の構文は以下のとおりです。 セレクタ { display: