8.1 プロパティ align-items
align-items と align-self プロパティは、Flex要素を交差軸に沿って整列させ、
レイアウトに柔軟性と正確さを提供します。
align-items プロパティは、Flexコンテナ内での交差軸（メイン軸に垂直な軸）に対する
Flex要素の整列を制御します。交差軸は flex-direction プロパティの値に依存します：
flex-directionがrowまたはrow-reverseの場合、交差軸は垂直になりますflex-directionがcolumnまたはcolumn-reverseの場合、交差軸は水平になります
値:
stretch: 要素はコンテナを満たすように引き伸ばされます（デフォルトの値）flex-start: 要素はコンテナの開始位置に整列されますflex-end: 要素はコンテナの終了位置に整列されますcenter: 要素はコンテナの中央に整列されますbaseline: 要素はテキストのベースラインに整列されます
使い方の例:
CSS
.container {
display: flex;
height: 200px;
border: 2px solid #000;
padding: 10px;
margin-bottom: 20px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
.align-stretch {
align-items: stretch;
}
.align-flex-start {
align-items: flex-start;
}
HTML
<div class="container align-stretch">
<div class="item">エレメント 1</div>
<div class="item">エレメント 2</div>
<div class="item">エレメント 3</div>
</div>
<div class="container align-flex-start">
<div class="item">エレメント 1</div>
<div class="item">エレメント 2</div>
<div class="item">エレメント 3</div>
</div>
8.2 プロパティ align-self
align-self プロパティは、特定のFlex要素に対して align-items の値を上書きすることができます。
このプロパティはFlex要素に直接適用され、その要素の交差軸における位置を制御します。
値:
auto: 親から値を継承（デフォルト）stretch: 要素はコンテナを満たすように引き伸ばされますflex-start: 要素はコンテナの開始位置に整列されますflex-end: 要素はコンテナの終了位置に整列されますcenter: 要素はコンテナの中央に整列されますbaseline: 要素はテキストのベースラインに整列されます
使い方の例:
CSS
.container {
display: flex;
height: 200px;
border: 2px solid #000;
padding: 10px;
margin-bottom: 20px;
align-items: flex-start;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
.self-flex-end {
align-self: flex-end;
}
.self-center {
align-self: center;
}
.self-baseline {
align-self: baseline;
}
HTML
<div class="container">
<div class="item self-flex-end">エレメント 3</div>
<div class="item self-center">エレメント 4</div>
<div class="item self-baseline">エレメント 5</div>
</div>
コードの説明:
.self-flex-end: この要素はコンテナの下端に整列されます.self-center: この要素は垂直方向の中央に整列されます.self-baseline: この要素はテキストのベースラインに整列されます
8.3 要素のセンタリング
Flexboxを使うと、justify-content と align-items または align-self の組み合わせを用いて、
要素を簡単に縦と横にセンタリングできます。
使い方の例:
CSS
.center-container {
display: flex;
justify-content: center; /* 水平方向の中央 */
align-items: center; /* 垂直方向の中央 */
height: 300px;
border: 2px solid #000;
}
.center-item {
background-color: #3498db;
color: white;
padding: 20px;
}
HTML
<div class="center-container">
<div class="center-item">センターの要素</div>
</div>
コードの説明:
-
.center-container:justify-content: center;を使って水平方向に、align-items: center;を使って垂直方向に要素をセンタリングしたFlexコンテナです .center-item: コンテナ内の中心に整列されたFlex要素です
GO TO FULL VERSION