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>