HTML DOMのStyle alignItemsプロパティとは？構文・値・使い方を解説
HTML DOMのStyle alignItemsプロパティは、フレックスコンテナ（flexible container）内に配置されたアイテムのデフォルトの整列方法（垂直方向の配置）を指定するために使用されるプロパティです。
JavaScriptから動的にフレックスアイテムの配置を変更したい場合に、このプロパティを活用することで、コンテナ内のアイテムの位置を柔軟に制御できます。
構文
alignItemsプロパティを設定する場合の構文は以下のとおりです。
object.style.alignItems = "stretch|center|flex-start|flex-end|baseline|initial|inherit";
設定できる値
alignItemsプロパティには、以下の値を指定できます。
| 値 | 説明 |
|---|---|
| stretch | デフォルト値です。コンテナに収まるようにアイテムを引き伸ばして表示します。 |
| center | アイテムをコンテナの中央に配置します。 |
| flex-start | アイテムをコンテナの先頭に配置します。 |
| flex-end | アイテムをコンテナの末尾に配置します。 |
| baseline | アイテムをコンテナのベースラインに沿って配置します。 |
| initial | このプロパティを初期値（デフォルト値）に戻します。 |
| inherit | 親要素のプロパティ値を継承します。 |
サンプルコード
ここで、Style alignItemsプロパティの具体的な使用例を見てみましょう。以下の例では、ボタンをクリックすると、フレックスコンテナ内のアイテムの配置が「flex-end」から「baseline」に動的に変更されます。
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 180px;
height: 220px;
padding: 10px;
border: 1px solid #333;
display: flex;
align-items: flex-end;
flex-flow: row wrap;
}
.ele {
width: 60px;
height: 60px;
background-color: skyblue;
}
.ele:nth-child(2n) {
background-color: orange;
}
</style>
<script>
function changeAlign(){
document.getElementById("container").style.alignItems = "baseline";
}
</script>
</head>
<body>
<h2>デモ見出し</h2>
<div id="container">
<div class="ele"></div>
<div class="ele"></div>
<div class="ele"></div>
</div>
<p>ボタンをクリックすると、上のdiv要素のalignItemsプロパティが変更されます</p>
<button onclick="changeAlign()">CHANGE</button>
</body>
</html>実行結果
上記のコードを実行すると、次のような出力が表示されます。
初期状態では、コンテナ内の3つのボックス（水色とオレンジ色）が「flex-end」の指定により、コンテナの下端に配置されています。
続いて、CHANGEボタンをクリックすると、JavaScriptのchangeAlign関数が実行され、alignItemsの値が「baseline」に変更されます。
ボタンをクリックした後は、アイテムがベースラインに沿って整列されることが確認できます。このように、alignItemsプロパティを使えば、JavaScriptからフレックスアイテムの垂直方向の配置を簡単に制御することが可能です。
-
HTML DOM スタイルの alignSelf プロパティとは？使い方と設定値を解説
HTML DOM の alignSelf プロパティは、フレックスコンテナ内にある特定のアイテムの配置（アラインメント）を指定するために使用されるプロパティです。このプロパティを利用することで、要素のグリッドレイアウトやフレックスボックスレイアウトにおいて、親コンテナに指定された align-items の値を、個々のアイテム単位で上書きすることができます。構文alignSelf プロパティを設定する場合の構文は以下のとおりです。object.style.alignSelf = auto|stretch|center|flex-start|flex-end|baseline|initial|i
-
HTML DOMのalignContentプロパティとは？使い方と設定値をわかりやすく解説
alignContentプロパティは、フレックスボックスやグリッドレイアウトにおいて、アイテムを整列するために使用されるプロパティです。特に、アイテムがコンテナ内の利用可能なスペースをすべて使っていない場合に、交差軸（垂直方向）に沿ってアイテムをどのように配置するかを指定できます。 構文 alignContentプロパティを設定するための構文は、以下の通りです。 【alignContentプロパティの設定】 object.style.alignContent = stretch|center|flex-start|flex-end|space-between|space-around|init