Flex Box 概念梳理

2021-09-13 03:54:48 字數 3105 閱讀 1724

flexible box 模型,通常被稱為 flexbox,是一種一維的布局模型。

之所以說 flexbox 是一種一維的布局,是因為乙個 flexbox 一次只能處理乙個維度上的元素布局,一行或者一列。作為對比的是另外乙個二維布局css grid layout,可以同時處理行和列上的布局。

採用 flex 布局的元素,稱為 flex 容器(flex container),容器裡的子元素稱為專案(item)。

從容器的角度來看,有兩個不變的軸,主軸由 flex-direction 定義,另一根軸垂直於它。預設定義是:

​ 1)從左往右的主軸(main axis),主軸開始位置稱為main start,結束位置稱為main end

​ 2)從上到下的交叉軸(cross axis),交叉軸開始位置稱為cross start,結束位置稱為cross end

flex-direction:row | row-reverse | column | column-reverse
特別注意:flex-direction設定後會引起專案排列方向改變。

/*** flex-start(預設值):左對齊。專案堆放在容器主軸開始位置(main start);

* flex-end:右對齊。專案堆放在容器主軸結束位置(main end);

* center: 居中。專案沿著主軸居中排列;

* space-between:兩端對齊,專案之間的間隔都相等。

* space-around:每個專案兩側的間隔相等。所以,專案之間的間隔比專案與邊框的間隔大一倍。

/*** flex-start:交叉軸的起點對齊。

* flex-end:交叉軸的終點對齊。

* center:交叉軸的中點對齊。

* baseline: 專案的第一行文字的基線對齊。

* stretch(預設值):如果專案未設定高度或設為auto,將佔滿整個容器的高度。

/*** flex-start:與交叉軸的起點對齊。

* flex-end:與交叉軸的終點對齊。

* center:與交叉軸的中點對齊。

* space-between:與交叉軸兩端對齊,軸線之間的間隔平均分布。

* space-around:每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。

* stretch(預設值):軸線佔滿整個交叉軸。

/*** 如果所有專案的flex-grow屬性都為1,則它們將等分剩餘空間(如果有的話)。

* 如果乙個專案的flex-grow屬性為2,其他專案都為1,則前者佔據的剩餘空間將比其他項多一倍。

/*** 如果所有專案的flex-shrink屬性都為1,當空間不足時,都將等比例縮小。

* 如果乙個專案的flex-shrink屬性為0,其他專案都為1,則空間不足時,前者不縮小。

flex-basis: | auto; /* default auto */
如果容器內所有專案大小總和超過容器,不設定 wrap 的情況下會溢位容器:

flex: none | [  ? ||  ]
建議優先使用這個屬性,而不是單獨寫三個分離的屬性,因為瀏覽器會推算相關值。

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

C 概念梳理

7 c 概念總結 7.1,c語言中,結構體struct中不能包括函式的,而在c 中struct中可以包括函式。7.2,c 中結構體和類可以通用,區別主要表現在訪問控制方面 struct中預設是public,而 class中預設的是private。7.3,建構函式最重要的作用是建立物件的本身,c 中每...

集合概念梳理

1.arraylist 有序不唯一 方便訪問 經常使用的乙個結果型別 可以和陣列進行對比 arraylist儲存資料的訪問和陣列相同 都是通過下標進行操作 不過arrarlist的下標是從1開始 arraylist長度可變 陣列長度不可變 arraylist可以理解成乙個長度可變的陣列 明顯比陣列更...

php fpm?fast cgi?CGI?概念梳理

剛開始對這個問題我也挺糾結的,看了 http權威指南 後,感覺清晰了不少。首先,cgi是幹嘛的?cgi是為了保證web server傳遞過來的資料是標準格式的,方便cgi程式的編寫者。web server 比如說nginx 只是內容的分發者。比如,如果請求 index.html,那麼web serv...