Flex佈局詳解

Flex佈局詳解

什麼是Flex佈局

• Flex佈局又叫做Flexible佈局、彈性佈局
• Flex佈局是目前web開發中用的最多的佈局方案

Flex佈局到底是用來解決一個什麼樣的問題呢

當並列書寫多個塊級標籤，它們會縱向向下排位.如果我們想將多個塊級標籤並列成一排，就得藉助position，float，或display屬性，這便是傳統的盒模型做法。

開啟flex佈局以後我們就可以輕易地完成以下佈局

Flex佈局基礎

Flex佈局的兩個基本概念

• 開啟了Flex的佈局叫做Flex container
• flex container 裡面的直接子元素叫 flex items

Flex的軸概念

預設情況下，橫著方向是主軸，豎著的方向是交叉軸，並且其實方向是從左到右，從上到下，這是為了控制內部元素排列方式產生的概念

開啟Flex佈局的鑰匙

• 在css中設定display屬性為flex 或者 inline-flex之後該標籤即可成為Flex container
• flex:Flex container以塊級元素存在
• inline-flex: Flex container以行內元素存在

Flex container上的屬性

1. flex-direction

• 用於修改主軸的方向
• 取值：row(預設方向) | row-reverse(橫向翻轉) | column
  (主軸改為豎向) | column-reverse(主軸改為豎向翻轉)

1. flex-wrap

• 用於控制flex items是否換行
• 取值：nowrap(預設) | wrap(開啟換行) | wrap-reverse（開啟換行並逆向排序）

1. justify-content

• 用於控制專案在橫軸的對齊方式
• 取值：flex-start(預設) | flex-end(主軸末尾對齊) | center（居中） | space-between | space-around | space-evenly;

4.align-items

• 用於控制專案在縱軸排列方式
• 取值：flex-start
   | flex-end | center | baseline | stretch(預設)

1. align-content

• 用於控制多行專案的對齊方式，如果專案只有一行則不會起作用
• 取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(預設);
• 使用方法跟align-items類似

Flex items上的屬性

1. flex

• 取值：預設0 1 auto，flex屬性是flex-grow，flex-shrink與flex-basis三個屬性的簡寫，用於定義專案放大，縮小與寬度。

1. flex-grow

• 取值：預設0，用於決定專案在有剩餘空間的情況下是否放大，預設不放大；注意，即便設定了固定寬度，也會放大。

1. flex-shrink

• 取值：預設1，用於決定專案在空間不足時是否縮小，預設專案都是1，即空間不足時大家一起等比縮小；注意，即便設定了固定寬度，也會縮小。

1. order

• 取值：預設0，用於決定專案排列順序，數值越小，專案排列越靠前。

1. align-self

• 取值：auto(預設) | flex-start | flex-end | center | baseline | stretch，表示繼承父容器的align-items屬性。如果沒父元素，則預設stretch。
• 用於讓個別專案擁有與其它專案不同的對齊方式，各值的表現與父容器的align-items屬性完全一致。

1. flex-basis

• 取值：預設auto，用於設定專案寬度，預設auto時，專案會保持預設寬度，或者以width為自身的寬度，但如果設定了flex-basis，權重會比width屬性高，因此會覆蓋width屬性。