Flexboxでレスポンシブレイアウトを作成する方法
HTML、CSS、Flexboxを使ってFlexコンテナの残りの高さまたは幅を埋める方法
flex-grow プロパティは、要素がどれだけ成長できるかを指定します。デフォルト値は 0 で、要素はコンテンツサイズに合わせてのみ成長します。
例：
<div class="container">
<div class="header">ヘッダー</div>
<div class="content">コンテンツ</div>
</div>
.container {
display: flex;
flex-direction: column;
}
.header {
flex-grow: 0;
}
.content {
flex-grow: 1;
}
この例では、.container は縦方向のFlexboxレイアウトで、.header と .content という2つの要素を持っています。
- .header は flex-grow: 0 で、コンテンツサイズに合わせてのみ成長します。
- .content は flex-grow: 1 で、残りの高さをすべて埋めるように成長します。
flex-basis プロパティは、要素の初期サイズを指定します。
<div class="container">
<div class="header">ヘッダー</div>
<div class="content">コンテンツ</div>
</div>
.container {
display: flex;
flex-direction: column;
}
.header {
flex-basis: 50px;
}
.content {
flex-grow: 1;
}
この例では、.header は flex-basis: 50px で、初期サイズが50pxになります。残りの高さは .content が flex-grow: 1 で埋めます。
align-items プロパティと justify-content プロパティは、Flexコンテナ内の要素をどのように配置するかを指定します。
<div class="container">
<div class="header">ヘッダー</div>
<div class="content">コンテンツ</div>
</div>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.header {
flex-basis: 50px;
}
.content {
flex-grow: 1;
}
この例では、.container は align-items: center と justify-content: center で、.header と .content が垂直方向と水平方向に中央揃えされます。
その他の方法
上記以外にも、以下のような方法で残りの高さまたは幅を埋めることができます。
- margin: auto を使う
- position: absolute と calc() を使う
- CSS Gridを使う
これらの方法を組み合わせることで、様々なレイアウトを作成することができます。
<div class="container">
<div class="header">ヘッダー</div>
<div class="content">コンテンツ</div>
</div>
.container {
display: flex;
flex-direction: column;
}
.header {
flex-grow: 0;
}
.content {
flex-grow: 1;
}
flex-basis プロパティを使う
<div class="container">
<div class="header">ヘッダー</div>
<div class="content">コンテンツ</div>
</div>
.container {
display: flex;
flex-direction: column;
}
.header {
flex-basis: 50px;
}
.content {
flex-grow: 1;
}
align-items プロパティと justify-content プロパティを使う
<div class="container">
<div class="header">ヘッダー</div>
<div class="content">コンテンツ</div>
</div>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.header {
flex-basis: 50px;
}
.content {
flex-grow: 1;
}
<div class="container">
<div class="content">コンテンツ</div>
</div>
.container {
display: flex;
flex-direction: column;
}
.content {
margin: 0 auto;
}
<div class="container">
<div class="content">コンテンツ</div>
</div>
.container {
display: flex;
flex-direction: column;
position: relative;
}
.content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class="container">
<div class="header">ヘッダー</div>
<div class="content">コンテンツ</div>
</div>
.container {
display: grid;
}
.header {
grid-area: 1 / 1 / 2 / 2;
}
.content {
grid-area: 2 / 1 / 3 / 2;
}
これらのサンプルコードを参考に、様々なレイアウトを作成してみてください。
Flexコンテナの残りの高さまたは幅を埋めるその他の方法
margin プロパティを使って、要素の外側に余白を追加することができます。
<div class="container">
<div class="content">コンテンツ</div>
</div>
.container {
display: flex;
flex-direction: column;
}
.content {
margin: auto;
}
この例では、.content は margin: auto で、左右に等しい余白が追加されます。
<div class="container">
<div class="content">コンテンツ</div>
</div>
.container {
display: flex;
flex-direction: column;
}
.content {
padding: 10px;
}
<div class="container">
<div class="content">コンテンツ</div>
</div>
.container {
display: flex;
flex-direction: column;
}
.content {
border: 1px solid #ccc;
}
この例では、.content は border: 1px solid #ccc で、1px幅の灰色の枠線が追加されます。
calc() 関数を使って、要素のサイズを動的に計算することができます。
<div class="container">
<div class="header">ヘッダー</div>
<div class="content">コンテンツ</div>
</div>
.container {
display: flex;
flex-direction: column;
}
.header {
height: 50px;
}
.content {
height: calc(100vh - 50px);
}
この例では、.content は height: calc(100vh - 50px) で、.header の高さ (50px) を除いた残りの高さになります。
CSS Grid は、2次元レイアウトを作成するためのレイアウトシステムです。
<div class="container">
<div class="header">ヘッダー</div>
<div class="content">コンテンツ</div>
</div>
.container {
display: grid;
}
.header {
grid-area: 1 / 1 / 2 / 2;
}
.content {
grid-area: 2 / 1 / 3 / 2;
}
この例では、.content は grid-area: 2 / 1 / 3 / 2 で、2行1列から3行2列までの領域を占めます。
html css flexbox
