CSS # 3 — 網頁排版聖器(Flex box)-上

Photo by Proxyclick Visitor Management System on Unsplash

Flex box 是一個 CSS3 的盒子模型(box model) 也可以稱為彈性盒子，為什麼會這麼說呢？它是為了適應不同的螢幕尺寸和顯示設備的排版方式，接下來我們來介紹。

• 主軸 (main axis)：用來決定元素是「水平」或「垂直」排列方式。
• 交錯軸 (cross axis)：與主軸 (main axis)垂直交錯，用來決定元素的「對齊位置」。
• 主軸起點 (main start)：預設排列起始點，最左邊。
• 主軸終點 (main end)。
• 交錯軸起點 (cross start)：預設貼齊位置點，最上方。
• 交錯軸終點 (cross end)。

父層容器 (flex container)的屬性

將所有要排序的元素放入此容器之中，也就是包住子元素(Flex item)的父元素，有以下幾種屬性。

• display
• flex-direction
• justify-content
• align-items
• align-content
• flex-wrap

那我們來介紹吧！

display

此為 CSS 屬性，那在 Flex box 來說會預設 flex 且會將容器內的子元素強制轉換為 區塊元素 (block)，並且在外層再包個 內聯元素(inline) 使得元素與元素之間不會換行。有個須注意，在 Flex box 特性中子元素在同一行內會自動按比例壓縮子元素的大小，並維持在同一行之中，但如果有設定 line-height 、 min-height 、 flex-shrink: 0 ，就不會被壓縮。

flex-direction

決定子元素的水平或垂直的排序方式，屬性的值有以下幾種。

row：預設值，排序方式先由左到右，從上到下
row-reverse：與 row 反轉排序方式
column：排序方式先從上到下，再由左到右
column-reverse：與 column 反轉排序方式

介紹這四種方式

• row：排序方式先由左到右

• row-reverse：排序方式先由右到左

• column：排序方式先從上到下，再由左到右

• column-reverse：排序方式先從下到上

justify-content

此屬性是在 Flexbox 容器內設定子元素做水平對齊(主軸 main axis)，其屬性的值有以下幾種:

• flex-start : 此屬性值會對子元素做對齊水平方向的主軸起點 (main start)：預設排列起始點，最左邊。

• center : 此屬性值會對子元素做水平置中對齊。

• flex-end : 此屬性值會對容器內的子元素做對齊水平方向的主軸終點 (main end)：排列終點，最右邊。

• space-between : 此屬性值會對容器內的子元素做水平對齊，但左右兩邊對齊於主軸起點 (main start) 與 主軸終點 (main end)。

• space-around : 此屬性值會對容器內的子元素做水平的平均分配對齊。

• space-evenly : 此屬性值會對容器內的子元素做水平的自適應對齊。

align-items

此屬性是在 Flexbox 容器內設定子元素做垂直對齊(交錯軸 cross axis)，但須設定高度 ，其屬性的值有以下幾種:

• flex-start : 此屬性值會對子元素做垂直方向對齊於交錯軸起點 (cross start)：預設貼齊位置點，最上方。

• center : 此屬性值會對子元素做垂直置中對齊。

• flex-end : 此屬性值會對容器內的子元素做垂直方向對齊於交錯軸終點 (cross end)。

• stretch : 此屬性值會對容器內的子元素撐滿整個高度(預設值)，但不能設定高度否則無效。

• baseline : 此屬性值會對容器內的子元素對基準線對齊，不過如果 item 當中有多行文字，那麼就會以第一行為主喔。。

align-content

此屬性與 align-items 類似，但差異在 align-items 是在 Flexbox 容器內針對單行子元素做垂直對齊(交錯軸 cross axis)，align-content 為針對多行子元素做垂直對齊(交錯軸 cross axis)。但須有 flex-wrap: wrap 換行的屬性值才有效果，其屬性的值有以下幾種:

• flex-start : 此屬性值會對多行子元素做對齊垂直方向的交錯軸起點 (cross start)：預設貼齊位置點，最上方。

//***HTML***
<div class="flexbox">
  <div class="item item1">item1</div>
  <div class="item item2">item2</div>
  <div class="item item3">item3</div>
  <div class="item item4">item4</div>
  <div class="item item5">item5</div>
</div>
//***CSS***
.flexbox {
  display: flex;
  padding: 10px;
  width: 500px;
  height: 500px;
  background-color: gray;
  flex-wrap: wrap;
  align-content: flex-start; //預設貼齊位置點，最上方。
}
.item {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  text-align: center;
  font-size: 20px;
}
.item1 {
  background-color: red;
}
.item2 {
  background-color: yellow;
}
.item3 {
  background-color: green;
}
.item4 {
  background-color: pink;
}
.item5 {
  background-color: blue;
}

• center : 此屬性值會對多行子元素做垂直置中對齊。

.flexbox {
  display: flex;
  padding: 10px;
  width: 500px;
  height: 500px;
  background-color: gray;
  flex-wrap: wrap;
  align-content: center; //垂直置中對齊。
}

• flex-end : 此屬性值會對容器內的多行子元素做垂直對齊方向的交錯軸終點 (cross end)。

.flexbox {
  display: flex;
  padding: 10px;
  width: 500px;
  height: 500px;
  background-color: gray;
  flex-wrap: wrap;
  align-content: flex-end; //對齊交錯軸終點 (cross end)。
}

• space-between : 此屬性值會對容器內的多行子元素做垂直對齊，但上下兩邊對齊於交錯軸起點 (cross start) 與 交錯軸終點 (cross end)。

.flexbox {
  display: flex;
  padding: 10px;
  width: 500px;
  height: 500px;
  background-color: gray;
  flex-wrap: wrap;
  align-content: space-between; //對齊於交錯軸起點與終點。
}

• space-around : 此屬性值會對容器內的多行子元素做平均垂直對齊。

.flexbox {
  display: flex;
  padding: 10px;
  width: 500px;
  height: 500px;
  background-color: gray;
  flex-wrap: wrap;
  align-content: space-around; //平均垂直對齊。
}

• stretch : 此屬性值會對容器內的多行子元素撐滿整個高度(預設值)，但不能設定高度否則無效。

.flexbox {
  display: flex;
  padding: 10px;
  width: 500px;
  height: 500px;
  background-color: gray;
  flex-wrap: wrap;
  align-content: stretch; //撐滿整個高度。
}

…

參考： Flexbox 

以上是我對 CSS # 3 — 網頁排版聖器(Flex box)-上 的學習筆記 😉。

***如果有任何想法，也歡迎留言與我分享~

***也謝謝你(妳)的閱讀，覺得有幫助的話別忘了順手拍個手喔！***