CSS - align-self

トップ > CSSリファレンス > align-self

概要

属性名 align-self
flex-start | flex-end | center | baseline | stretch
初期値stretch
適用可能要素フレックスコンテナ
継承継承しない
メディアvisual
アニメーション不可

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS310(-ms-flex-item-align)
11
2021(-webkit)
29
15(-webkit)
17
6.1(-webkit)
9

説明

フレックスアイテムの表示位置を指定します。align-items はフレックスコンテナに対して、align-self は個々のフレックスアイテムに対して指定します。フレキシブルボックスについての概要は flex を参照してください。

説明
flex-startフレックスアイテムの上側を揃えて表示します。flex-direction が column や column-reverse の場合は右側を揃えて表示します。IE10 では start として実装されていました。
flex-endフレックスアイテムの下側を揃えて表示します。flex-direction が column や column-reverse の場合は右側を揃えて表示します。IE10 では end として実装されていました。
centerフレックスアイテムの高さの中心を揃えて表示します。flex-direction が column や column-reverse の場合は横幅の中心を揃えて表示します。
baselineフレックスアイテム内の文字のベースラインをそろえて表示します。
stretchフレックスアイテムの高さを揃えて表示します。flex-direction が column や column-reverse の場合は横幅を揃えて表示します。

使用例

CSS
.flexbox {
  display: flex;
  display: -ms-flexbox;
  padding: 10px;
  border: 1px solid #999;
  background-color: #ddd;
  flex-wrap: wrap;
}
.boxA, .boxB, .boxC {
  border: 1px solid #999;
  text-align: center;
  width: 100px;
}
.boxA {
  background-color: #fcc;
  min-height: 20px;
}
.boxB {
  background-color: #cfc;
  min-height: 60px;
}
.boxC {
  background-color: #ccf;
  min-height: 40px;
  -ms-flex-item-align: end;
   -webkit-align-self: flex-end;
          align-selft: flex-end;
}
.flex-start {
  -webkit-align-items: flex-start;
  -ms-flex-item-align: start;
          align-items: flex-start;
}
HTML
<div class="flexbox flex-start">
 <div class="boxA">A</div>
 <div class="boxB">B</div>
 <div class="boxC">C</div>
</div>
表示
A
B
C

関連項目

flex-direction, flex-wrap, flex-flow, order, flex, flex-grow, flex-shrink, flex-basis, justify-content, align-items, align-self, align-content

リンク


Copyright (C) 2015 杜甫々
初版:2015年11月22日、最終更新:2015年11月22日
http://www.tohoho-web.com/css/prop/align-self.htm