Flex 佈局：個人的學習與理解

QL²⁰¹⁸發表於2019-03-07
Flex

1、Flex：彈性佈局

任何容器：

.parent {
    display: flex;
}複製程式碼

行內元素：

.parent {
    display: inline-flex;
}複製程式碼

Webkit 核心的瀏覽器，必須加上 -webkit 字首：

.parent {
    display: -webkit-flex; /* Safari */
    display: flex;
}複製程式碼


2、基本理解

表格 或 宮格


3、容器的屬性 (在父容器上)

父容器的屬性：

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content複製程式碼

1、flex-direction : 決定元素的排列方向

.parent {
    flex-direction: row | row-reverse | column | column-reverse;
    // 從左向右 | 從右向左 | 從上向下 | 從下向上
}複製程式碼

2、flex-wrap : 如果一行排不下，如何換行

.parent {
    flex-wrap: nowrap | wrap | wrap-reverse;
    // 不換行 | 換行，第一行在上面 | 換行，第一行在下面
}複製程式碼

3、flex-flow : 是 flex-direction 和 flex-wrap 的簡寫形式，預設 row  nowrap。

.parent {
    flex-flow: <flex-direction>  <flex-wrap>;
}複製程式碼

4、justify-content : 橫向對齊方式

.parent {
    justify-content: flex-start | flex-end | center | space-between | space-around;
    // 左對齊 | 右對齊 | 居中 | 兩邊對齊 | 間隔相等，專案之間的間隔比專案與邊框的間隔大一倍
}
複製程式碼

5、align-items : 縱向對其方式

.parent {
    align-items: flex-start | flex-end | center | baseline | stretch;
    // 上對齊 | 下對齊 | 居中 | 專案的第一行文字的基線對齊 | 如果專案未設定高度或設為auto，將佔滿整個容器的高度
}複製程式碼

6、align-content : 有多行時，每行在縱向上的對齊方式

.parent {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    // 上對齊 | 下對齊 | 中點對齊 | 兩端對齊 | 間隔相等，中間間隔比與邊框間隔大一倍 | 鋪滿
}複製程式碼


4、專案的屬性 (在子元素上)

子元素的屬性：

1. order
2. flex-grow
3. flex-shrink
4. flex-basis
5. flex
6. align-self複製程式碼

1、order : 子元素的排列順序，數值越小越靠前，預設為 0 .

.children {
    order: <interger>;
    // 整數
}複製程式碼

2、flex-grow : 子元素放大比例，預設為 0 ，即如果存在剩餘空間，也不放大。

.children {
    flex-grow: <number>;
    // 數字
}複製程式碼

3、flex-shrink : 子元素縮小比例，預設為 1 ，即如果空間不足，該專案將縮小。

.children {
    flex-shrink: <number>;
    // 數字， 0 為不縮小
}複製程式碼

4、flex-basis : 橫向佔據空間，預設為 auto ，即子元素本來大小。

.children {
    flex-basis: <length> | auto;
    // 跟width和height一樣的值(如350px)，將佔據固定空間 | 本來大小
}複製程式碼

5、flex : flex-grow 和 flex-shrink 和 flex-basis 的簡寫，預設0 1 auto，後兩個屬性可選

.children {
    flex: none | <flex-grow> <flex-shrink> <flex-basis>
}複製程式碼

6、align-self : 屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。

.children {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}複製程式碼


5、Game Over


相關文章