align-itemsがstretchのFlexbox枠で内部のコンテンツの縦方向の配置を変更する - Flexbox枠内コンテンツの縦位置の中央揃え、下揃え - CSS
Flexboxでalign-itemsがstretchの枠で内部のコンテンツの縦方向の配置を変更するコードを紹介します。
概要
Flexboxでalign-itemsがstretchに設定されている場合、枠の高さは、一番枠の高さの高い枠に揃えられます。
この状態で、内部のコンテンツの縦位置を中央ぞろえしたいことがあります。
この記事では、Flexboxでalign-itemsがstretchの枠で内部のコンテンツの縦方向の配置を変更するCSSのコードを紹介します。
現象の確認
コード
以下のHTML,CSSを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="flex-align-vertical-inside-content.css" />
</head>
<body>
<h1>Flexbox 枠内コンテンツの縦位置のアライメント</h1>
<div class="Frame">
<div class="InnerFrame">
コンテンツ1です。<br />
コンテンツ1です。
</div>
<div class="InnerFrame">
コンテンツ2です。<br />
コンテンツ2です。<br />
コンテンツ2です。<br />
コンテンツ2です。<br />
コンテンツ2です。
</div>
<div class="InnerFrame">
コンテンツ3です。
</div>
<div class="InnerFrame">
コンテンツ4です。<br />
コンテンツ4です。<br />
コンテンツ4です。
</div>
</div>
</body>
</html>
body {
background-color:#C0C0C0;
}
h1 {
font-size:1.6rem;
}
.Frame {
display: flex;
align-items:stretch;
background-color:#FFFFFF;
border: 1px solid #ff6a00;
}
.InnerFrame {
flex:1;
border: 1px solid #9ad800;
margin: 0.2rem 0.2rem 0.2rem 0.2rem;
}
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
枠が横方向に並びます。枠の高さは一番行数の多い[コンテンツ2]の枠の高さに揃えられます。
下図は枠内の文字列(コンテンツ)が上揃えで表示されていますが、中央揃え、下揃えに変更したいです。
なお、
こちらの記事で紹介している
vertical-alignプロパティを変更しても縦方向の位置は変わりません。
.InnerFrame {
flex: 1;
border: 1px solid #9ad800;
margin: 0.2rem 0.2rem 0.2rem 0.2rem;
display: table-cell;
vertical-align: middle;
}
position:relativeを変更した場合でも正しく表示されません。
.InnerFrame {
flex: 1;
border: 1px solid #9ad800;
margin: 0.2rem 0.2rem 0.2rem 0.2rem;
position: absolute;
top: 50%;
margin-top: -0.5em;
}
対処法
Flexboxの枠内の縦位置を変更する場合は内部の枠に対しても
display:flex を指定し、
align-items:centerを設定します。
align-itemsプロパティの詳細については
こちらの記事を参照してください。
コード
先のコードを変更し、以下のHTML,CSSファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="flex-align-vertical-inside-content.css" />
</head>
<body>
<h1>Flexbox 枠内コンテンツの縦位置のアライメント</h1>
<div class="Frame">
<div class="InnerFrame">
コンテンツ1です。<br />
コンテンツ1です。
</div>
<div class="InnerFrame">
コンテンツ2です。<br />
コンテンツ2です。<br />
コンテンツ2です。<br />
コンテンツ2です。<br />
コンテンツ2です。
</div>
<div class="InnerFrame">
コンテンツ3です。
</div>
<div class="InnerFrame">
コンテンツ4です。<br />
コンテンツ4です。<br />
コンテンツ4です。
</div>
</div>
</body>
</html>
body {
background-color:#C0C0C0;
}
h1 {
font-size:1.6rem;
}
.Frame {
display: flex;
align-items:stretch;
background-color:#FFFFFF;
border: 1px solid #ff6a00;
}
.InnerFrame {
flex:1;
border: 1px solid #9ad800;
margin: 0.2rem 0.2rem 0.2rem 0.2rem;
display:flex;
align-items:center;
}
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
枠内の文字列(コンテンツ)の縦位置が中央揃えで表示されていることが確認できます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
