CSS設(shè)置三行七列的方法

在CSS中，我們可以使用display: flex屬性來創(chuàng)建一個三行七列的網(wǎng)格布局，以下是一個簡單的示例：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
.item {
  width: 14.285714285714285%; /* 100% / 7 */
  height: 33.33333333333333%; /* 100% / 3 */
  box-sizing: border-box;
  border: 1px solid #000;
}

在這個示例中，我們創(chuàng)建了一個名為container的容器，它使用flex布局來管理其子元素。flex-wrap: wrap;屬性允許子元素在容器內(nèi)自動換行。justify-content: space-between;屬性確保子元素之間的空間均勻分布。align-items: flex-start;屬性使得子元素在容器內(nèi)從頂部開始排列。

我們創(chuàng)建了一個名為item的子元素，它代表每個小方塊，我們設(shè)置其寬度為14.285714285714285%，高度為33.33333333333333%，使得每個小方塊占據(jù)大約14.29%的寬度和33.33%的高度。box-sizing: border-box;屬性確保小方塊的總寬度和高度包括邊框，我們設(shè)置邊框?yàn)?像素的實(shí)線，顏色為黑色。

當(dāng)我們在HTML中使用這個布局時(shí)，我們可以將多個item元素添加到container中，每個item代表一個小方塊，瀏覽器會自動計(jì)算每個小方塊的位置和大小，并創(chuàng)建出一個三行七列的網(wǎng)格布局。