「幹貨」CSS Flexbox彈性框布局模式示例

從理論上講，使用flexbox彈性框布局模式來建構複雜的布局非常簡單，10個使用CSS的flexbox布局示例清單，您可以複制和粘貼它們以開始使用自己的布局。我們将示範這些基本布局模式。

display: flex
           

每個示例都假設您的 HTML 包含一個帶有類的元素，然後包含多個子級，這些子級都有一個類（子級的數量因示例而異）：containeritem

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  ...
</div>
           

全部拉伸，固定間距

最基本的彈性布局模式：讓幾個框拉伸并填充其父元素的整個寬度。您需要做的就是設定容器，并在子項上對值進行值：

display: flexflex-grow

.container {
  display: flex;
}

.item {
  flex-grow: 1;
  height: 100px;
}

.item + .item {
  margin-left: 2%;
}
           

我們使用選擇器僅在項目之間添加間隙（本質上隻是跳過清單中第一項的左邊距）。

與任何其他元素相比，增加将增加元素允許拉伸到的空間量。如果我們在這裡設定中間元素，我們基本上會将可用空間分成 6 個塊（每個項目 1 個塊加上中間項目的額外 1 塊，1+1+2+1+1）。中間項獲得兩個塊 （） 的空間，所有其他元素獲得一個塊 （）。flex-growflex-grow2flex-grow: 2flex-grow: 1

拉伸中間，固定間距

一個常見的應用程式和 Web 模式是建立一個頂部欄，我們隻想在其中拉伸中間元素，但保持最右邊和最左邊的元素固定。 如果我們隻想讓一個元素拉伸，我們可以在應該保持靜态的元素上設定固定寬度（例如 ），并在應該拉伸的元素上設定：

100pxflex-grow: 1

.container {
  display: flex;
}

.item {
  height: 100px;
  width: 100px; /* 預設固定寬度 */
}

.item-center { 
  flex-grow: 1; /* 設定中間元素增長和拉伸 */
}

.item + .item { 
  margin-left: 2%; 
}
           

即使這裡的中間元素有一個定義的，也會讓它拉伸以占用所有可用空間。width100pxflex-grow

交替網格

建立一個具有一些變化的網格：在每行兩個大小相等的項目之後，有一個項目占據了整行：

我們需要為此：

設定在容器上（或者全部呈現在一行上）flex-wrap: wrapitems

設定在容器上，隻在元素之間建立空間（而不是在父元素和項目的邊緣之間）justify-content: space-between

将每個項目設定為（或等于或小于 width49%50% 的類似内容）

将每三個項目設定為以使其填滿整行。 使其填充整行。我們可以使用選擇器定位清單中的每三項。width100%nth-child()

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  width: 48%;
  height: 100px;
  margin-bottom: 2%;
}

.item:nth-child(3n) {
  width: 100%;
}
           

如果你希望第一行是全寬的，而後面的兩個項目共享一行，請注意你不能寫，那将針對所有項目。 你必須通過選擇每三個元素來定位第一個項目，然後後退兩個項目：

.item:nth-child(1n) { width: 100% }.item:nth-child(3n-2) { width: 100% }
           

3x3 網格

我們可以通過設定所有子對象的首選寬度來建立 3x3 網格（在這裡使用簡寫：）項目之間的邊距是每行的剩餘部分，即 （100%-32x3）/2=2%。我已經比對了邊距（）以實作所有元素之間的均勻間距：flex-grow0flex-basisflexflex: 0 32%margin-bottom: 2%

.container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
}

.item {
  flex: 0 32%;
  height: 100px;
  margin-bottom: 2%; /* (100-32*3)/2 */
}
           

您可以更改以增加或減少每行上的項目數。每行放置 4 個項目，每行放置 5 個項目，依此類推。flex-basisflex: 0 24%flex: 0 19%

3x3 網格，受限比例 （1：1）

我們可以通過使用一個有點粗糙的CSS技巧來建立一個包含比例受限的項目的網格。在本例中，如果我們在設定元素時使用，則相對于該項的父項設定。我們可以通過将項的和設定為相同的值（并通過有效地設定該元素的值）來使用該效果建立一個正方形：

padding%paddingpaddingwidth.containerwidthpadding-bottomheightpadding-bottom

.container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    
    .item {
      width: 32%;
      padding-bottom: 32%; /*與寬度相同，設定高度*/
      margin-bottom: 2%; /* (100-32*3)/2 */
      position: relative;
    }
           

由于我們已經建立了一個實際上僅由填充組成的元素，并且沒有内容的位置，是以我們需要在此示例中設定并添加一個子元素，并使用該元素“重置”畫布并添加内容。position: relative.item --tt-darkmode-color: #A3A3A3;">3x3 網格，受限比例 （16：9）

要更改項目的比例，您需要做的就是更改比例。更改會影響每行上的項目數，以免影響網格結構，例如更改為建立 16：9（相當于 32：18）的矩形。widthpadding-bottom.itemwidthpadding-bottom18%

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  width: 32%;
  padding-bottom: 18%; /*與寬度相同，設定高度*/
  margin-bottom: 2%; /* (100-32*3)/2 */
}
           

圖表：豎線

如果要使用 flexbox 建立簡單的圖形可視化，則隻需設定容器并為每個條形定義 a.将確定條形錨定到圖形的底部。align-itemsflex-endheightflex-end

.container {
  display: flex;
  height: 300px;
  justify-content: space-between;
  align-items: flex-end;
}

.item { width: 14%; }
.item-1 { height: 40%; }
.item-2 { height: 50%; }
.item-3 { height: 60%; }
.item-4 { height: 20%; }
.item-5 { height: 30%; }

           

圖表：水準條

使用與垂直條相同的技術，我們可以簡單地添加值來建立一組水準條.可以有一個預設值，或者其中水準運作 （→） 和垂直運作 （↓）。您也可以分别使用 （←） 和 （↑） 來反轉兩者的方向。flex-directioncontainercolumnflex-directionrowcolumnrowcolumnrow-reversecolumn-reverse

.container {
  display: flex;
  height: 300px;
  justify-content: space-between;
  flex-direction: column;
}

.item { height: 14%; }
.item-1 { width: 40%; }
.item-2 { width: 50%; }
.item-3 { width: 60%; }
.item-4 { width: 20%; }
.item-5 { width: 30%; }
           

垂直堆疊（居中）

要建立一個垂直堆疊并使項目從上到下運作，我們需要做的就是将預設值更改為：flex-directionrowcolumn

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.item {
  height: 40px;
  margin-bottom: 10px;
}
           

瀑布流

你可能已經在網際網路上看到過瀑布流布局，但它們很可能都是由類似的JavaScript庫提供支援的。Flexbox 似乎是最終僅使用 CSS 建立此布局的絕佳選擇。

使用 flexbox 建立瀑布流布局的主要挑戰之一是，要使項目影響其上方和下方項目的位置，我們需要将容器更改為項目從上到下運作。這将建立一個看起來很棒的布局，類似于砌牆效果，但可能會讓使用者感到困惑，它建立了一個意想不到的元素排序。如果您從左到右閱讀，元素似乎被打亂并以看似随機的順序出現，例如 1、3、6、2、4、7、8 等。flex-directioncolumn

幸運的是，我們可以使用屬性來更改元素的渲染順序。我們可以将該屬性與選擇器的一些巧妙使用相結合，根據項目的原始順序動态排序。如果我們想建立一個包含三列的瀑布流布局，我們可以将所有項目分為三個“組”，如下所示：ordernth-child()

/* 将項目重新排序成行 */
.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n)   { order: 3; }

/* 強制新列 */
.container::before,
.container::after {
  content: "";
  flex-basis: 100%;
  width: 0;
  order: 2;
}
           

第一個元素、第四個元素、第 7 個元素等設定。具有相同值的元素将根據源代碼順序或首先設定的值按升序排序，是以在此示例中，我們生成了三個排序如下的集合：（3n+1） with、（3n+2） with 和 （3n） with。這三個組代表我們的三列。把順序放在一起成為。order1order1, 4, 7, 10order: 12, 5, 8order: 23, 6, 9order: 31, 4, 7, 10, 2, 5, 8, 3, 6, 9

如果我們確定将這些組中的每一個呈現為一列（不多也不少），則當您從左到右閱讀時，會産生項目已恢複其原始順序的錯覺。如果我們在視覺上将網格解析為行，則第一行将包含每個組中的第一個元素（），第二行将包含每個組（）中的第二個元素，依此類推。然後，我們在占據父級高度 100% 的列之間插入元素，這會迫使列換行，而不會意外地與相鄰列合并。以下是完整的 CSS 代碼段：1, 2, 34, 5, 6

.container {
      display: flex;
      flex-flow: column wrap;
      align-content: space-between;
      height: 580px;
    }
    
    .item {
      width: 32%;
      margin-bottom: 2%; /* (100-32*3)/2 */
    }
    
   /* 将項目重新排序成行 */
    .item:nth-child(3n+1) { order: 1; }
    .item:nth-child(3n+2) { order: 2; }
    .item:nth-child(3n)   { order: 3; }
    
    /* 強制新列 */
    .container::before,
    .container::after {
      content: "";
      flex-basis: 100%;
      width: 0;
      order: 2;
    }
           

從視覺上看，這實作了非常接近瀑布流效果。