cman.jp > WEBページ作成TOP > CSSリファレンス > 「個別アイテムの揃え方」
WEBページ作成
広告
align-self「flexアイテムの垂直位置指定」
flexbox（Flexible Box Layout Model）はCSS3で導入されたレイアウトモードです。
flexboxの機能一覧
「align-self」は、flexbox（flexコンテナ内のflexアイテム）の垂直（縦）方向の位置指定です。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 3.0 | - | 不可 |
広告
align-selfの指定方法
| 構文 | ||
|---|---|---|
|
display : flex; |
||
| プロパティ | 設定値 | 意味 |
|
align-self: 値 |
auto | flexアイテムを折り返さない（デフォルト） |
| flex-start | 上揃え（flex-directionが縦の場合は左揃え） | |
| flex-end | 下揃え（flex-directionが縦の場合は右揃え） | |
| center | 中央揃え | |
| baseline | ベースラインに合わせる | |
| stretch | flexboxアイテムの高さに合わせて自動調整 | |
align-self のサンプル
<style type="text/css">
/* ----- flexコンテナ ----- */
.flexbox1{
display : flex;
background: #d4ddf8;
height : 100px;
}
/* ----- flexアイテム ----- */
.flexbox1 > div{
margin : 3px;
color : #fff;
padding : 5px;
background: #2d59dc;
}
.ca{ align-self : flex-start; }
.cb{ align-self : flex-end; }
.cc{ align-self : center; }
.cd{ align-self : baseline; }
.ce{ align-self : stretch; }
</style>
<html>
<div id="id3" class="flexbox1">
<div class="ca">flex-start</div>
<div class="cb">flex-end</div>
<div class="cc">center</div>
<div class="cd">baseline</div>
<div class="ce">stretch</div>
</div>
</html>
flex-start
flex-end
center
baseline
stretch
「align-self」はflexboxの機能の一部となります。通常は他の機能と組み合わせて利用されます。
以下にて「flexbox」の機能をご確認ください。
flexboxの機能一覧
ベンダープレフィックスの使用
flexboxはCSS3で定義されています。このため、一部ブラウザによっては正常に動作しません。
対応状況→http://caniuse.com/#search=flex
このため、ベンダーフレックス「-webkit-」「-ms-」を利用した方が対応範囲が広がります。（上記サンプル参照）
| 関連するCSS(STYLE) | |
|---|---|
| align-content | コンテナ内の行の揃え方 |
| align-items | コンテナ内の垂直方向の揃え方 |
| flex | flex-grow,flex-shrink,flex-basisをまとめて指定 |
| flex-basis | flexboxアイテムの幅を調整 |
| flex-direction | flexboxアイテムの配置（縦/横） |
| flex-flow | flex-directionとflex-wrapまとめて指定 |
| flex-grow | flexboxアイテムの自動幅調整（伸ばす） |
| flex-shrink | flexboxアイテムの自動幅調整（縮む） |
| flex-wrap | flexboxアイテムの折り返し |
| justify-content | コンテナ内の水平方向の揃え方 |
| order | flexコンテナ内の並び順 |
| display | ボックスの種類 |
広告