技术笔记

编程 营销 外贸


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;amp;file=file.png" alt="" /></p> <pre><code> &amp;lt;div class=&amp;quot;border p-3 mb-4&amp;quot;&amp;gt;         &amp;lt;div class=&amp;quot;d-flex bg-light mb-2&amp;quot;&amp;gt;           &amp;lt;div class=&amp;quot;p-2 border&amp;quot;&amp;gt;块级 Flex&amp;lt;/div&amp;gt;           &amp;lt;div class=&amp;quot;p-2 border&amp;quot;&amp;gt;容器占满整行&amp;lt;/div&amp;gt;         &amp;lt;/div&amp;gt;         &amp;lt;span class=&amp;quot;ms-2&amp;quot;&amp;gt;← 观察这里的位置关系&amp;lt;/span&amp;gt;         &amp;lt;hr /&amp;gt;                 &amp;lt;div class=&amp;quot;d-inline-flex bg-light&amp;quot;&amp;gt;           &amp;lt;div class=&amp;quot;p-2 border&amp;quot;&amp;gt;行内 Flex&amp;lt;/div&amp;gt;           &amp;lt;div class=&amp;quot;p-2 border&amp;quot;&amp;gt;与其他元素&amp;lt;span class=&amp;quot;text-primary&amp;quot;&amp;gt;同行显示&amp;lt;/span&amp;gt;&amp;lt;/div&amp;gt;         &amp;lt;/div&amp;gt;         &amp;lt;span class=&amp;quot;ms-2&amp;quot;&amp;gt;← 观察这里的位置关系&amp;lt;/span&amp;gt;       &amp;lt;/div&amp;gt;</code></pre>

页面列表

ITEM_HTML