レイアウトを崩さずに一番下のボタンを左揃えにしたい
Q&A
Closed
解決したいこと
画像のようにボタンを配置したのですが、一番下のボタンを真ん中ではなく上のボタンに合わせてhぢあり揃えにしたいです。
現在justify-contents:center;
としているのですが、space-betweenやleftだと可変にしたらうまくいかなかったので
解決方法を教えて下さい。
該当するソースコード
<div class="label-3">
<label><input type="checkbox" value="正社員" class="check2"><span>正社員</span></label>
<label><input type="checkbox" value="契約・派遣社員" class="check2"><span>契約・派遣社員</span></label>
<label><input type="checkbox" value="アルバイト" class="check2"><span>アルバイト</span></label>
<label><input type="checkbox" value="フリーランス・自営業" class="check2"><span>フリーランス・自営業</span></label>
<label><input type="checkbox" value="学生" class="check2"><span>学生</span></label>
<label><input type="checkbox" value="専業主婦" class="check2"><span>専業主婦</span></label>
<label><input type="checkbox" value="その他無職" class="check2"><span>その他無職</span></label>
</div>
label span {
color: #333333;
font-size: 16px;
border-radius: 8px;
background: #F2F2F2;
font-weight: bold;
}
label input:checked + span {
color: #FFF;
background: #6BC0B1;
}
.label-3{
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 auto;
}
.label-3 label span{
padding: 0;
padding-top: 12px;
margin: 9px 6px;
width: 161px;
height: 40px;
display: block;
text-align: center;;
}
0
