display: flex
とflex-wrap: wrap
を使って単純に要素を複数行に並べようとすると、要素が偶数個なのにのときに1つ余ってしまう事がある
↓これを
1
2
3
4
↓このように余らせないで
1
2
3
4
↓きちっと正方形に収めたい
1
2
3
4
元の状態
1
2
3
4
<div class="wrapper">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
</div>
<style>
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 200px;
/* ここから下はデザイン用 */
gap: 10px;
background-color: #abd8ee;
padding: 10px;
}
.item {
height: 50px;
width: 50px;
background-color: #cc334d;
}
</style>
display: flexとitemに50%を指定する方法
子要素(item)のサイズが変わっても大丈夫な場合に有効
1
2
3
4
<div class="wrapper">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
</div>
<style>
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 200px;
gap: 10px;
background-color: #abd8ee;
padding: 10px;
}
.item {
height: 50px;
width: calc(50% - 10px); /* 変更Point */
background-color: #cc334d;
}
</style>
display: gridを使う方法 1
隙間が変わっても大丈夫な場合に有効
1
2
3
4
<div class="wrapper">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
</div>
<style>
.wrapper {
display: grid; /* 変更Point */
grid-template-columns: auto auto; /* 変更Point */
place-items: center; /* 変更Point */
width: 200px;
gap: 10px;
background-color: #abd8ee;
padding: 10px;
}
.item {
height: 50px;
width: 50px;
background-color: #cc334d;
}
</style>
display: gridを使う方法 2
親のサイズが変わっても大丈夫な場合に有効
1
2
3
4
<div class="wrapper">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
</div>
<style>
.wrapper {
display: grid; /* 変更Point */
grid-template-columns: auto auto; /* 変更Point */
width: fit-content; /* 変更Point */
gap: 10px;
background-color: #abd8ee;
padding: 10px;
}
.item {
height: 50px;
width: 50px;
background-color: #cc334d;
}
</style>
HTMLに行ごとのdivを追加する方法
HTMLを書き換えることに躊躇がない場合に有効
1
2
3
4
<div class="wrapper">
<!-- 変更Point -->
<div class="line">
<span class="item">1</span>
<span class="item">2</span>
</div>
<!-- 変更Point -->
<div class="line">
<span class="item">3</span>
<span class="item">4</span>
</div>
</div>
<style>
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 200px;
gap: 10px;
background-color: #abd8ee;
padding: 10px;
}
/* 変更Point */
.line {
display: flex;
gap: 10px;
}
.item {
height: 50px;
width: 50px;
background-color: #cc334d;
}
</style>
コメント