CSS - align-content

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

概要

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

サポート (説明)

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

説明

フレックスアイテムの横幅の合計が、フレックスコンテナの横幅に満たない場合の余白の表示方法を指定します。フレキシブルボックスについての概要は flex を参照してください。

説明
flex-startフレックスアイテムを上部に寄せて、下部に余白を表示します。IE10 では start として実装されていました。
flex-endフレックスアイテムを下部に寄せて、上部に余白を表示します。IE10 では end として実装されていました。
centerフレックスアイテムを中心に表示して、上下に余白を表示します。
space-betweenフレックスアイテム間に均等に余白を表示します。
space-aroundフレックスアイテム間と上下に余白を表示します。
stretchフレックスアイテムの高さを伸ばします。

使用例

CSS
.flexbox {
  display: flex;
  display: -ms-flexbox;
  padding: 2px;
  border: 1px solid #999;
  background-color: #ddd;
  flex-wrap: wrap;
  width: 300px;
  height: 100px;
}
.flexbox > * {
  border: 1px solid #999;
  text-align: center;
  width: 100px;
  background-color: #cfc;
}
.flex-start {
  -webkit-align-content: flex-start;
     -ms-flex-line-pack: start;
          align-content: flex-start;
}
.flex-end {
  -webkit-align-content: flex-end;
     -ms-flex-line-pack: end;
          align-content: flex-end;
}
.center {
  -webkit-align-content: center;
     -ms-flex-line-pack: center;
          align-content: center;
}
.space-between {
  -webkit-align-content: space-between;
     -ms-flex-line-pack: space-between;
          align-content: space-between;
}
.space-around {
  -webkit-align-content: space-around;
     -ms-flex-line-pack: space-aroun;
          align-content: space-around;
}
.stretch {
  -webkit-align-content: stretch;
     -ms-flex-line-pack: stretch;
          align-content: stretch;
}
HTML
<h5>flex-start</h5>
<div class="flexbox flex-start">
 <div class="boxA">A</div><div class="boxB">B</div>
 <div class="boxC">C</div><div class="boxD">D</div>
 <div class="boxE">E</div><div class="boxF">F</div>
</div>
<h5>flex-end</h5>
<div class="flexbox flex-end">
 <div class="boxA">A</div><div class="boxB">B</div>
 <div class="boxC">C</div><div class="boxD">D</div>
 <div class="boxE">E</div><div class="boxF">F</div>
</div>
<h5>center</h5>
<div class="flexbox center">
 <div class="boxA">A</div><div class="boxB">B</div>
 <div class="boxC">C</div><div class="boxD">D</div>
 <div class="boxE">E</div><div class="boxF">F</div>
</div>
<h5>space-between</h5>
<div class="flexbox space-between">
 <div class="boxA">A</div><div class="boxB">B</div>
 <div class="boxC">C</div><div class="boxD">D</div>
 <div class="boxE">E</div><div class="boxF">F</div>
</div>
<h5>space-around</h5>
<div class="flexbox space-around">
 <div class="boxA">A</div><div class="boxB">B</div>
 <div class="boxC">C</div><div class="boxD">D</div>
 <div class="boxE">E</div><div class="boxF">F</div>
</div>
<h5>stretch</h5>
<div class="flexbox stretch">
 <div class="boxA">A</div><div class="boxB">B</div>
 <div class="boxC">C</div><div class="boxD">D</div>
 <div class="boxE">E</div><div class="boxF">F</div>
</div>
表示
flex-start
A
B
C
D
E
F
flex-end
A
B
C
D
E
F
center
A
B
C
D
E
F
space-between
A
B
C
D
E
F
space-around
A
B
C
D
E
F
stretch
A
B
C
D
E
F

関連項目

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-content.htm