Flexbox 容器和專案

Flexbox 或靈活框是一種以可預測的方式在頁面上排列內容的佈局方法。Flexbox 提供了一種改進，優於傳統的塊模型定位，使用浮動或甚至表格定位頁面上的內容。

從本質上講，Flexbox 可以分解為父元素（flex 容器）和子元素（flex 項）。

Flex 容器

可以通過將其 display 屬性設定為 flex 來建立 Flex 容器：

.container {
  display: flex;
}

Flex 專案

Flex 容器的每個子元素都變為 flex 項。然後，這些彈性項可以接收其他屬性，以修改其在頁面上的定位方式。

.item {
  flex: 1;
}

flex: 1 屬性是 flex-grow: 1 的簡寫，使其能夠相對於容器內的兄弟姐妹成長。

將這些放在一起就是 HTML 標記：

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