CSS 彈性盒子Flex

剛接觸flex三天，特總結並記錄一下。

flex感覺就是排版布局的神器。（好吧剛接觸前端，原諒我一次孤陋寡聞）

參考文章：

要使用flex布局，需要設計到兩層，外面一層叫做flex容器（flex container），簡稱」容器」。它的所有子元素自動成為容器成員，稱為flex專案（flex item），簡稱」專案」。下面是乙個flex布局的基本概念介紹：

借用大神們的圖

容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。專案預設沿主軸排列。

flex container 容器即父類元素

flex item 術語叫專案，就是你需要讓他們按照規矩排版的元素了。

宣告方式：

在父類元素下加樣式

display：flex;

display:-webkit-flex;

flex容器有以下六個屬性：

1. flex-direction 2. flex-wrap 3. flex-flow 4. justify-content 5. align-items 6. align-content

一、

flex-direction

flex-direction屬性決定主軸的方向（即專案的排列方向）。

1.flex

-direction

: row

|row

-reverse

|column

-reverse;

四個值分別代表：

-row（預設值）：主軸為水平方向，起點在左端。 -

row-reverse：主軸為水平方向，起點在右端。 -

column：主軸為垂直方向，起點在上沿。 -

column-reverse：主軸為垂直方向，起點在下沿。

二、 flex-wrap

flex-wrap屬性定義，如果一條軸線排不下，如何換行。有三個屬性值，預設情況下是wrap

引數：nowrap 不換行元素則會被強制壓縮，寬度與設定的可能一樣。

wrap 換行

wrap-reverse 反轉換行

三、flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。

四、 justify-content

justify-content屬性定義了專案在主軸上（即相當於x軸）的對齊方式。一共有五個屬性值：

flex-start：上對齊 flex-end：右對齊 center ：居中對齊 space-between：兩端對齊 space-around：專案間距相等

後面暫時沒用到，先不列舉，一一記錄一下。

五、align-items

align-items屬性定義專案在交叉軸上（即y軸上）如何對齊。也有五個屬性值：

align-items: flex-start | flex-end | center | baseline | stretch;

用大神的介紹了

分別表示：上對齊、下對齊、居中對齊、專案的第一行文字的基線對齊、如果專案未設定高度或設為auto，將佔滿整個容器的高度（預設值）。

六、align-content

align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。該屬性定義多跟軸線在y軸上的對齊方式，與align-items有點類似。其有以下六個屬性值：

- flex-start：與交叉軸的起點對齊。 - flex-end：與交叉軸的終點對齊。 - center：與交叉軸的中點對齊。 - space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。 - space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。 - stretch（預設值）：軸線佔滿整個交叉軸。

介紹完了flex容器，介紹就要介紹容器裡的成員了，flex專案（flex item），簡稱」專案」。這裡需要之一的是：設為flex布局以後，子元素的float、clear和vertical-align屬性將失效。

flex專案有以下六個屬性：

1. order 2. flex-grow 3. flex-shrink 4. flex-basis 5. flex 6. align-self

1、order

order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。有了這個屬性，可以調整在html中出現的順序。

2、flex-grow

flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。

如果乙個專案的flex-grow屬性為2，另乙個專案都為1，則前者佔據的剩餘空間將比後一項多一倍。如下所示：

3、flex-shrink

flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。

如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果乙個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。

4、flex-basis

flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。類似於設定了width屬性。

6、align-self

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

align-self: auto | flex-start | flex-end | center | baseline | stretch;

上面六個取值中，除了auto，其他值與align-items屬性完全一致。這裡就不一一介紹了。

flex-direction: column;

flex-wrap: wrap; 這兩個衝突，

父節點新增屬性

.card-body

CSS 彈性盒子Flex

Flex布局（CSS彈性盒子）

flex彈性盒子

彈性盒子 flex

CSS 彈性盒子Flex

Flex布局（CSS彈性盒子）

flex彈性盒子

彈性盒子 flex

相關推薦