d-flex d-inline flex
<p>d-flex会占满整行； d-inline flex 如果有多余空间，旁边的会在同行挨着展示；
也就是display block flex, display inline-block flex的区别
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=ce976bce11bd6d8a85279f226c37f30b&amp;file=file.png" alt="" /></p>
<pre><code> &lt;div class=&quot;border p-3 mb-4&quot;&gt;
&lt;div class=&quot;d-flex bg-light mb-2&quot;&gt;
&lt;div class=&quot;p-2 border&quot;&gt;块级 Flex&lt;/div&gt;
&lt;div class=&quot;p-2 border&quot;&gt;容器占满整行&lt;/div&gt;
&lt;/div&gt;
&lt;span class=&quot;ms-2&quot;&gt;← 观察这里的位置关系&lt;/span&gt;
&lt;hr /&gt;
&lt;div class=&quot;d-inline-flex bg-light&quot;&gt;
&lt;div class=&quot;p-2 border&quot;&gt;行内 Flex&lt;/div&gt;
&lt;div class=&quot;p-2 border&quot;&gt;与其他元素&lt;span class=&quot;text-primary&quot;&gt;同行显示&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;span class=&quot;ms-2&quot;&gt;← 观察这里的位置关系&lt;/span&gt;
&lt;/div&gt;</code></pre>