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>