CSS3中display的Flex布局

2021-08-19 20:09:41 字數 1758 閱讀 1914

1

.container

編譯之後的效果很明顯,介面的布局也很合理,看起來很清晰。那麼究竟這個屬性是幹嘛用的呢?

flex是flexible box的縮寫,意為"彈性布局",用來為盒狀模型提供最大的靈活性。

設為flex布局以後,子元素的floatclearvertical-align屬性將失效。

採用flex布局的元素,稱為flex容器(flex container),簡稱"容器"。它的所有子元素自動成為容器成員,稱為flex專案(flex item),簡稱"專案"。容器預設存在兩根軸:水平的主軸(main axis)和垂直的交叉軸(cross axis)。主軸的開始位置(與邊框的交叉點)叫做main start,結束位置叫做main end;交叉軸的開始位置叫做cross start,結束位置叫做cross end。專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size,佔據的交叉軸空間叫做cross size

以下6個屬性設定在容器上:

flex-direction

1.box 

屬性可選值的範圍為row(預設)沿水平主軸由左向右排列、row-reverse沿水平主軸由右向左排列、column沿垂直主軸右上到下和column-reverse。

flex-wrap

1.box

屬性可選值的範圍為nowrap(預設)不換行、wrap換行(第一行在上方)和wrap-reverse(***~)

flex-flow

1.box 

寫法屬性中,將上述兩種方法的值用||連線即可

justify-content

1.box 

專案在主軸上的對齊方式(主軸究竟是哪個軸要看屬性flex-direction的設定了)

flex-start:在主軸上由左或者上開始排列

flex-end:在主軸上由右或者下開始排列

center:在主軸上居中排列

space-between:在主軸上左右兩端或者上下兩端開始排列

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

1.box 

這裡面直接上說明的更清楚一些

以上介紹完了容器中的屬性,下面說一下容器中專案的屬性:

1

.item

1

.item

1

.item

1

.item

1

.item

1

.item

容器屬性和專案屬性是可以配合使用的,用法類似於css的行內式和嵌入式的道理一樣。希望你可以在實際應用中熟練使用。

CSS3中display屬性的Flex 彈性 布局

不要臉的把人家的拷貝過來了 留著以後用 原位址 1 container 編譯之後的效果很明顯,介面的布局也很合理,看起來很清晰。那麼究竟這個屬性是幹嘛用的呢?flex是flexible box的縮寫,意為 彈性布局 用來為盒狀模型提供最大的靈活性。設為flex布局以後,子元素的float clear...

css3中的display屬性 flex布局

1 container編譯之後的效果很明顯,介面的布局也很合理,看起來很清晰。那麼究竟這個屬性是幹嘛用的呢?flex是flexible box的縮寫,意為 彈性布局 用來為盒狀模型提供最大的靈活性。設為flex布局以後,子元素的float clear和vertical align屬性將失效。採用fl...

CSS中的display屬性

display中文為顯示的意識,顯而易見它的功能就是為了控制頁面元素顯示方式 display中為我們提供了很多屬性,其中最常見的有 none屬性代表著元素不會被顯示 比如很多 的頂部導航欄都會有二級選單,只有當我們的滑鼠移動或點選時二級選單才會顯示出來。這是就可以使用到display none這個屬...