ฉันมีเลย์เอาต์แบบเฟล็กซ์บ็อกซ์ที่เรียบง่ายพร้อมคอนเทนเนอร์เช่น:
.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
ตอนนี้ฉันต้องการให้รายการในแถวสุดท้ายสอดคล้องกับอีกรายการ justify-content: space-between;
ควรใช้เนื่องจากความกว้างและความสูงของตารางสามารถปรับได้
ขณะนี้ดูเหมือนว่า
ที่นี่ฉันต้องการให้รายการที่ด้านล่างขวาเป็น "คอลัมน์กลาง" อะไรคือวิธีที่ง่ายที่สุดในการบรรลุเป้าหมายนั้น? นี่คือjsfiddleขนาดเล็กที่แสดงพฤติกรรมนี้
.exposegrid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.exposetab {
width: 100px;
height: 66px;
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(0, 0, 0, 0.4);
border-radius: 5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
<div class="exposegrid">
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
</div>