Flexboxを使い、要素の上下中央寄せ、均等割りの方法をご紹介します。
※ このドキュメントは2016年5月26日に勧告候補になったドキュメント「CSS Flexible Box Layout Module Level 1 W3C Candidate Recommendation, 26 May 2016」を参照しています。
方法
flex-containerに「align-items」プロパティを使用します。
各プロパティの値は下記の通りで、例えば上下中央寄せにしたい場合は、centerを指定します。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Flexboxテスト</title>
<meta charset="UTF-8">
</head>
<style>
.container{
display: flex;
width: 500px;
height: 500px;
background-color: #aaa;
flex-flow: wrap;
justify-content: space-around;
/* 縦方向の並び順*/
/*
flex-start：上揃え（デフォルト）
flex-end：下揃え
center：中央揃え
baseline：ベースライン
stretch：伸縮
*/
align-items: center;
}
.item1{
background-color: yellow;
}
.item2{
background-color: blue;
}
.item3{
background-color: green;
}
</style>
<body>
<div class="container">
<div class="flex-item item1">
<p>TEST HOGE</p><p>TEST HOGE</p>
</div>
<div class="flex-item item2">
<p>TEST HOGE</p>
</div>
<div class="flex-item item3">
<p>TEST HOGE</p><p>TEST HOGE</p><p>TEST HOGE</p>
</div>
</div>
</body>
</html>実行結果
上下左右中央寄せ
今回は上下の並び替えを行うためのプロパティ「align-items」紹介でした。
上下左右中を央寄せにする場合は「align-items」と「justyify-content」を組み合わせることで可能です。
.flex-container{
justify-content: center;
align-items: center;
}
関連記事
関連タグ: