2個概念10種屬性教你上手flex佈局

兩個概念

插圖

一. 容器與項目

容器：應用display:flex | inline-flex樣式的元素爲容器元素,確定了容器元素以後，子元素的float,clear,position屬性將會失效，因爲（flex佈局已經夠強大啦，不需要其他屬性支持其佈局）

項目：容器元素內部的子元素爲項目

容器和項目

二. 主軸與交叉軸

主軸：flex-direction: row | column | row-reserver | column-reserve定義的軸爲主軸，根據其屬性值，可以有一下4種可能性。

主軸和交叉軸

交叉軸：主軸以外的一條軸就默認爲交叉軸。

十個屬性

10個屬性

1. flex-direction:確定容器的主軸

.container {
    flex-direction:row | column | row-reserver  | column-reserve
}

2. flex-wrap:如果項目過多，主軸一行排不下，其排列形式

.container {
    flex-wrap: no-wrap | wrap | wrap-reverse
}

flex-wrap

3. justify-content：主軸對齊方式

.container {
    justify-content:flex-start | flex-end | center | space-between | space-around
}

justify-content

4. align-item: 交叉軸對齊方式

.container {
    justify-content:flex-start | flex-end | center | baseline | stretch
}

align-item

5. align-content: 當項目過多時，主軸上排列不了，多行排列，把多行項目作爲一個整體，在交叉軸上的對齊方式。屬性特性大體如：align-item

.container {
    align-content:flex-start | flex-end | center | space-between | stretch
}

6. order:項目的排列方式，order值越小排列越前

    .item {
        order:<integer> ||  0
    } 

order

7. flex-grow:在容器有剩餘空間的前提下，每個項目對於剩餘空間所佔比例指數

    .item {
         flex-grow:<integer> ||  0
    } 

flex-grow

8. flex-shrink:在容器空間不足的前提下，每個項目縮放所佔比例指數

    .item {
         flex-shrink:<integer> ||  1
    } 

flex-shrink

9. flex-basis:容器的剩餘空間就是由該屬性計算出，flex-basis表示項目所佔空間

    .item {
         flex-basis:<length> | auto
    } 

10. align-self:整個容器由自己的對齊方式，容器裏面的項目如果需要個性的對齊方式，可以使用該屬性設置

    .item {
         align-self:auto | flex-start | flex-end | center | baseline | stretch
    } 

總結

flex佈局十分靈活,可以擺脫之前尷尬的佈局局面，瞭解概念屬性就可以愉快佈局啦，當然不要忘記起瀏覽器支持情況。

兼容性

我是懶蟲菇涼，如果你也喜歡，就請關注，一起學習吧！