読者です 読者をやめる 読者になる 読者になる

Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

display:flexの学習 その0001-06 cross axis方向の余白の配分(flexアイテムの配置)を設定する align-content、align-items、align-selfについて

制作 css

参考にさせて頂いたページ

MDN

その他の記事

はじめに

今回は、大雑把にいうと、cross axis方向の余白を調整する方法についてです。 以下のいずれかのプロパティを設定することによって調整できます。

  • align-content(flexコンテナに設定するプロパティ)
  • align-items(flexコンテナに設定するプロパティ)
  • align-self(flexアイテムに設定するプロパティ)

align-contentについて

効果があるのはflexアイテムが複数行のとき

align-contentプロパティはflexコンテナに設定するプロパティであり、flexアイテムが複数行になっているときにのみ効果が現れるプロパティです。 よって、flex-wrapがwrapであることも前提になると思います。

サンプルコード

align-contentを使用して、cross axisのcenterに配置するサンプルコードを書いてみました。

<style>
.flex{
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  height: 600px;
  width: 600px;
  background-color: #eeeeee;
}
.flex > div{
  background: #ffdddd;
  width: 150px;
}
.flex :nth-child(1){
  background-color: #ffeeee;
}
.flex :nth-child(2){
  background-color: #eeffee;
}
.flex :nth-child(3){
  background-color: #eeeeff;
}
.flex :nth-child(4){
  background-color: #ffffee;
}
.flex :nth-child(5){
  background-color: #eeffff;
}
</style>

<div class="flex">
  <div>flexアイテム nth-child(1)</div>
  <div>flexアイテム nth-child(2)<br>テキスト</div>
  <div>flexアイテム nth-child(3)<br>テキスト<br>テキスト</div>
  <div>flexアイテム nth-child(3)<br>テキスト<br>テキスト<br>テキスト</div>
  <div>flexアイテム nth-child(3)<br>テキスト<br>テキスト<br>テキスト<br>テキスト</div>
</div>

align-itemsについて

ここを読むと解りやすかった

flexコンテナに設定するプロパティです。

基本的には「CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス」に画像と解説があって解りやすかったです。

サンプルの構文については「align-items - CSS | MDN」が良さそうです。

ただ前提知識として、基本的な用語を理解しておく必要はやっぱりあるかもしれないです。

基本的な用語については「CSS flexible box の利用 - CSS | MDN」が参考になりました。

align-selfについて

align-itemsの値を個別に上書き

align-selfプロパティをflexアイテムに設定することによって、align-itemsで設定した値を、flexアイテム毎に上書きできます。

サンプルコード

以下のようなサンプルコードを書いてみました。

<style>
.flex{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 600px;
  width: 600px;
  background-color: #eeeeee;
}
.flex > div{
  background: #ffdddd;
  width: 150px;
}
.flex :nth-child(1){
  background-color: #ffeeee;
}
.flex :nth-child(2){
  background-color: #eeffee;
}
.flex :nth-child(3){
  background-color: #eeeeff;
}
.flex :nth-child(4){
  background-color: #ffffee;
}
.flex :nth-child(5){
  background-color: #eeffff;
  align-self: flex-end;
}
</style>

<div class="flex">
  <div>flexアイテム nth-child(1)</div>
  <div>flexアイテム nth-child(2)<br>テキスト</div>
  <div>flexアイテム nth-child(3)<br>テキスト<br>テキスト</div>
  <div>flexアイテム nth-child(3)<br>テキスト<br>テキスト<br>テキスト</div>
  <div>flexアイテム nth-child(3)<br>テキスト<br>テキスト<br>テキスト<br>テキスト</div>
</div>