位置を変更するプロパティ
親要素にdisplay:flexを指定した時に位置を変更することができるプロパティを紹介します。
その他flexに関して興味のある方は下記をご覧ください。
Web制作では必須のdisplay:flexのflex,gapプロパティとは？
flexのorder,flew-wrap,flex-directionを深堀りしよう
justify-content
justify-contentは横方向の空いているスペースを使用して子要素の位置を調整できるプロパティです。
// 指定方法
justify-content:値;
// 初期値
justify-content:
flex-start
;
flex-start
flex-startは子要素を左詰めで並べることができる値です。
center
centerは子要素を中央寄せにすることができる値です。
flex-end
flex-endは子要素を右寄せで並べることができる値です。
space-between
space-betweenは子要素を親要素の幅に両端揃えで並べることができる値です。
space-around
space-aroundは子要素を余白を均等割りして並べることができる値です。
※両サイドの余白だけは半分のサイズになります。
align-items
align-itemsは縦方向の空いているスペースを使用して子要素の位置を調整できるプロパティです。
// 指定方法
align-items:値;
// 初期値
align-items:
stretch
;
stretch
stretchは親要素の高さに合わせて子要素を伸縮することができる値です。
flex-start
flex-startは親要素の上部に合わせて子要素を並べることができる値です。
flex-end
flex-endは親要素の下部に合わせて子要素を並べることができる値です。
center
centerは親要素の上下中央に子要素を並べることができる値です。
baseline
baselineは少し特殊で子要素の位置調整ではなく子要素内の文字の大きいサイズの下部に合わせて揃えることができる値です。
align-self
align-selfはalign-itemsでしている値を子要素事に上書きすることが可能なプロパティです。 なので子要素にalign-itemsと同じ値を指定するこで上書きが可能です。
// 指定方法
align-self:値;
// 初期値
align-self:
auto
;
使用例
<div class="container">
<div class="item1 child">1</div>
<div class="item2 child">2</div>
<div class="item3 child">3</div>
<div class="item4 child">4</div>
</div>
<style>
div {
font-size:
2rem;
font-weight:
700;
color:
#fff;
}
.container {
display:
flex;
flex-wrap:
wrap;
align-items:
center;
height:
200px;
border:
1px solid #000;
width:
400px;
}
.child {
display:
flex;
justify-content:
center;
align-items:
center;
height:
100px;
width:
100px;
}
.item1 {
background-color:
#E33629;
align-self:
flex-start;
}
.item2 {
background-color:
#F8BD00;
}
.item3 {
background-color:
#319F43;
}
.item4 {
background-color:
#587DBD;
}
</style>
align-content
align-contentは親要素の高さが指定されていて子要素が複数行の際に子要素の縦位置の変更をすることができるプロパティです。
// 指定方法
align-content:値;
// 初期値
align-content:
stretch
;
stretch
stretchは親要素の高さに合わせて子要素を伸縮することができる値です。
flex-start
flex-startは親要素の上部に子要素を揃えることができる値です。
flex-end
flex-endは親要素の下部に子要素を揃えることができる値です。
center
centerは親要素の上下中央に子要素を配置できる値です。
space-between
space-betweenは親要素の上下に子要素を配置できる値です。
space-around
space-aroundは親要素の上下の余白を均等割りして子要素を配置できる値です。
まとめと補足
今回はflexの位置を変更するプロパティについてまとめてみました。
私自身「justify-content」と「align-items」をよく使用しているのですが「align-self」と「align-content」を使用したことがなかったので良い勉強になりました。
機会があれば是非使ってみたいと思いました。
参考文献
justify-content – CSS: カスケーディングスタイルシート | MDN
align-items – CSS: カスケーディングスタイルシート | MDN
align-self – CSS: カスケーディングスタイルシート | MDN
align-content – CSS: カスケーディングスタイルシート | MDN
HTML5&CSS3デザイン 現場の新標準ガイド【第2版】