CSS 中的網格和 Flex 佈局-css教學-PHP中文網

CSS 中的網格和 Flex 佈局

WBOY

發布： 2024-09-06 14:31:02

原創

978 人瀏覽過

Grid and Flex Layout in CSS

介紹

FlexBox 和網格版面都是強大的版面。

彈性盒：

Flexbox 是一維版面模型，最適合在單行或單列中排列元素。
當元素的大小或容器的大小未知時，Flexbox 特別有用。
它非常適合水平和垂直對齊項目，並且對於建立導覽列、側邊欄或工具列非常有用。

CSS 網格：

網格是一種二維佈局模型，最適合同時將元素排列成行和列。
它非常適合建立複雜的佈局，並且可以同時處理列和行，這使其成為建立複雜頁面佈局的好選擇。

網格佈局詳細

grid-template-columns: repeat(3, 1fr);
grid-template-row: repeat(3, auto);
grid-column: 1/3
grid-row: 1/4

登入後複製

行覆蓋

repeat(3, minmax(200px, 1fr)) 語句建立三行（或列，取決於使用位置），每行的最小尺寸為 200px，最大尺寸為 1fr。
1fr 單位表示網格容器中可用空間的一小部分。因此，如果容器的大小超過所有行的總最小大小（在本例中為 600px），則剩餘空間將在行之間平均分配。

repeat(3, minmax(200px 1fr))

登入後複製

自動調整與自動填充

CSS 網格中的自動填入和自動調整關鍵字控制當網格項目不佔用網格容器中的額外空間時網格的行為方式。

自動填充

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

登入後複製

在此範例中，網格將建立容器中能夠容納的盡可能多的 100 像素列。 如果還有剩餘空間，它將在各列之間平均分配。

自動調整：

這個關鍵字也告訴網格創建盡可能多的軌道，但它會折疊空軌道，因此網格末尾沒有空軌道。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

登入後複製

在此範例中，網格將建立容器中能夠容納的盡可能多的 100 像素列。 如果還有剩餘空間，它將在各列之間平均分配，並且任何空列都將被折疊。

子網格

當您希望網格項目成為網格容器並與其父網格對齊時，將使用 CSS 網格佈局中的子網格值。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.item {
  display: grid;
  grid-template-columns: subgrid;
}

登入後複製

注意：-

當您希望巢狀網格與父網格對齊時，這會很有用。
但是，子網格並未在所有瀏覽器中廣泛支援。

容器查詢

貨櫃尺寸查詢

寬度媒體查詢考慮視口寬度但容器大小查詢考慮容器寬度容器是被查詢的元素。

規則：-

規則只對容器後代有效而不是容器本身
容器大小查詢是響應式設計的補充，而不是媒體查詢的替代品。

<article class="card">
    <h2>That's No Moon. It's a Space Station.</h2>
    <p class="text">At 198km diameter, Mimas is bigger than the first Death Star (120km) but smaller than the second (800km). </p>
    <p class="link"><a href="https://science.nasa.gov/saturn/moons/mimas/" target="_blank" class="button">More about Mimas</a></p>
  </article>

<!-- we can't query cards in container query so only work with descendants-->
<!-- Workaround solution would be check below-->
<div class="card">
<article >
    <h2>That's No Moon. It's a Space Station.</h2>
    <p class="text">At 198km diameter, Mimas is bigger than the first Death Star (120km) but smaller than the second (800km). </p>
    <p class="link"><a href="https://science.nasa.gov/saturn/moons/mimas/" target="_blank" class="button">More about Mimas</a></p>
  </article>
</div>

.card {
  container-name: card;
  container-type: inline-size;
}

@container card (min-width: 200px) {
  article {
    background-color: red;
  }
}

@container card (min-width: 250px) {
  article {
    ...
  }
}

登入後複製

以上是CSS 中的網格和 Flex 佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！