bootstrap-flex總結
一主軸方向、默認橫線排布 flex-row(默認）。flex-column是豎向排列
<div class="d-flex "> <div class="p-2 bg-primary text-white">Item 1</div> <div class="p-2 bg-success text-white">Item 2</div> <div class="p-2 bg-warning text-dark">Item 3</div> </div> <hr> <div class="d-flex flex-column "> <div class="p-2 bg-primary text-white">aaa</div> <div class="p-2 bg-success text-white">bbb</div> <div class="p-2 bg-warning text-dark">ccc</div> </div>
二、主軸排列 (justify-content-*)
.justify-content-start: 項目靠主軸起點對齊 (默認)。
.justify-content-end: 項目靠主軸終點對齊。
.justify-content-center: 項目在主軸上居中對齊。
.justify-content-between: 第一個項目在起點，最后一個在終點，中間項目間距相等。
.justify-content-evenly: 項目間和項目與邊緣的間距都相等。
<div class="d-flex justify-content-evenly "> <div class="p-2 bg-primary text-white">Item 1</div> <div class="p-2 bg-success text-white">Item 2</div> <div class="p-2 bg-warning text-dark">Item 3</div> </div> <hr> <div class="d-flex justify-content-end "> <div class="p-2 bg-primary text-white">Item 1</div> <div class="p-2 bg-success text-white">Item 2</div> <div class="p-2 bg-warning text-dark">Item 3</div> </div>
三、 align-items-* Item高度不同的對齊
align-items-stretch: 項目拉伸以填滿整個容器高度 (默認).align-items-start: 項目頂部對齊 (如果主軸是row)。.align-items-end: 項目底部對齊。.align-items-center: 項目在交叉軸上居中對齊。.align-items-baseline: 項目按文本基線對齊
<div class="example-container d-flex align-items-start" style="height: 150px;"> <div class="p-2 bg-primary text-white">Item 1</div> <div class="p-5 bg-success text-white">Item 2 (Tall)</div> <div class="p-2 bg-warning text-dark">Item 3</div> </div> <hr> <div class="example-container d-flex align-items-end" style="height: 150px;"> <div class="p-2 bg-primary text-white">Item 1</div> <div class="p-5 bg-success text-white">Item 2 (Tall)</div> <div class="p-2 bg-warning text-dark">Item 3</div> </div> <hr> <div class="example-container d-flex align-items-center" style="height: 150px;"> <div class="p-2 bg-primary text-white">Item 1</div> <div class="p-5 bg-success text-white">Item 2 (Tall)</div> <div class="p-2 bg-warning text-dark">Item 3</div> </div> <hr> <div class="example-container d-flex align-items-stretch " style="height: 150px;"> <div class="p-2 bg-primary text-white">Item 1</div> <div class="p-5 bg-success text-white">Item 2 (Tall)</div> <div class="p-2 bg-warning text-dark">Item 3</div> </div>
浙公網安備 33010602011771號