首頁 > web前端 > css教學 > 主體

如何將 Flex 項目置於周圍元素不均勻的容器中?

Barbara Streisand
發布: 2024-11-01 02:45:28
原創
226 人瀏覽過

How to Center a Flex Item in a Container with Uneven Surrounding Elements?

將容器中的Flex 專案與其他Flex 專案居中

挑戰:

挑戰:

居中在彈性容器內,同時被不同數量的 包圍。

方法:

由於彈性對齊屬性會分配容器內的可用空間,因此在不採取額外措施的情況下,將單一項目置於不均勻的同級元素中居中是一項挑戰。

考慮:

當周圍元素的總長度為

解決方案:

<code class="html"><div class="container">
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
  </div>
  <div>
    <h2>I'm an h2</h2>
  </div>
  <div>
    <span>I'm span 3</span>
  </div>
</div></code>
登入後複製
<code class="css">.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container div {
  flex: 1 1 auto;  // Equalize flex sizing
  text-align: center;
}

h2 {
  flex: 0 0 auto;  // Prevent h2 from affecting flex sizing
  margin: auto;   // Center within its container
}</code>
登入後複製
將 包起來。在其

說明:

透過設定內部

的flex屬性將容器設定為“1 1 auto” ,它們在彈性容器內佔據相同的空間。

的 Flex 屬性設定為“0 0 auto”,將其從 Flex 空間分佈中排除。邊距自動確保

位於其
的中心
    其他見解:
  • 元素在其各自的
    內居中。由於文字對齊屬性,容器。 雖然這種方法將

    居中,但完美,如果周圍內容的長度是動態的,它可能不適合。

以上是如何將 Flex 項目置於周圍元素不均勻的容器中?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!