Flexboxにおける要素の縮小
Flexboxでは、flex-shrinkプロパティを使用することで、要素がコンテナに収まるように縮小される比率を調整できます。
<style>
.container {
display: flex;
}
.item {
flex-shrink: 1;
width: 100px;
}
.item2 {
flex-shrink: 2;
}
</style>
<div class="container">
<div class="item">アイテム1</div>
<div class="item item2">アイテム2</div>
<div class="item">アイテム3</div>
</div>
上記の例では、アイテム1とアイテム3のflex-shrinkは1に設定されており、アイテム2のflex-shrinkは2に設定されています。これにより、アイテム2は、アイテム1およびアイテム3よりも2倍速く縮小されます。
練習問題4
以下のコードを実際に試し、アイテム2がアイテム1およびアイテム3よりも速く縮小されることを確認してください。
<style>
.container {
display: flex;
}
.item {
flex-shrink: 1;
width: 100px;
}
.item2 {
flex-shrink: 3;
}
</style>
<div class="container">
<div class="item">アイテム1</div>
<div class="item item2">アイテム2</div>
<div class="item">アイテム3</div>
</div>
Flexboxにおける基本サイズの調整
Flexboxでは、flex-basisプロパティを使用することで、要素の基本サイズを調整できます。これにより、要素の伸び縮みの基準となるサイズが指定できます。
<style>
.container {
display: flex;
}
.item {
flex-basis: 100px;
}
</style>
<div class="container">
<div class="item">アイテム1</div>
<div class="item">アイテム2</div>
<div class="item">アイテム3</div>
</div>
上記の例では、すべてのアイテムのflex-basisが100pxに設定されています。これにより、各アイテムの基本サイズが100pxになり、このサイズを基準に伸縮が行われます。
練習問題5
以下のコードを実際に試し、アイテム2のflex-basisを200pxに設定した場合、どのように表示が変わるか確認してください。
<style>
.container {
display: flex;
}
.item {
flex-basis: 100px;
}
.item2 {
flex-basis: 200px;
}
</style>
<div class="container">
<div class="item">アイテム1</div>
<div class="item item2">アイテム2</div>
<div class="item">アイテム3</div>
</div>
このコードでは、.container要素にdisplay: flexが設定されており、子要素の.itemおよび.item2にflex-basisが設定されています。.item要素には、flex-basisが100pxに設定されていますが、.item2にはflex-basisが200pxに設定されています。
このため、アイテム1とアイテム3は基本サイズが100pxに設定されており、アイテム2の基本サイズが200pxに設定されます。コードを実行すると、アイテム2が他のアイテムよりも幅が大きく表示され、アイテム1とアイテム3は同じサイズで表示されることが確認できます。このように、flex-basisプロパティを使って、Flexbox内の要素の基本サイズを個別に調整することができます。
この章では、Flexboxにおける要素の縮小や基本サイズの調整方法について学びました。練習問題を通じて理解を深めていきましょう。