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>