参考にさせて頂いたページ
MDN
その他の記事
はじめに
今回は、大雑把にいうと、cross axis方向の余白を調整する方法についてです。 以下のいずれかのプロパティを設定することによって調整できます。
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>
