CSS 21天入門:彈性盒子(flex box)
當(dāng)前位置:點晴教程→知識管理交流
→『 技術(shù)文檔交流 』
今天我們來聊聊 CSS 里的彈性盒子(Flex Box)。 簡單來說,彈性盒子是一種布局模式,可以讓我們更輕松地排列和對齊網(wǎng)頁上的元素,尤其是在我們不知道元素具體大小或者它們會動態(tài)變化的時候。 基本概念彈性盒子布局主要由兩部分組成:容器(container)和項目(items)。
要使用彈性盒子布局,只需將容器的 display 屬性設(shè)置為 flex 或 inline-flex。
一個例子下面一個普通流布局的頁面。
它在瀏覽器在呈現(xiàn)如下: 如果為容器 div 設(shè)置了 display 為 flex 的話,效果則如下:
彈性盒子模型借一張圖,說明一下彈性盒子模型 當(dāng)元素設(shè)置為 flex 時,它沿兩個軸來布局:
理解模型的概念,就可以來看看具體的一些屬性了。 下面介紹的屬性,基本上圍繞上面的兩個軸來做文章,幫助我們實現(xiàn)現(xiàn)在布局可能。 主要屬性前面說了彈性盒子布局主兩部分組成,下面也按這兩個部分分開說一個對應(yīng)的屬性。 容器屬性容器可以為里面的項目定義排列方向、主軸上的對齊方式和交叉軸上的對齊方式。 一個一個來看。 1.flex-direction:定義項目的排列方向。
2.justify-content:定義項目在主軸上的對齊方式。
3.align-items:定義項目在交叉軸上的對齊方式。
項目屬性項目屬性可以為項目定義放大比例、縮小比例及初始大小。
2.flex-shrink:定義項目的縮小比例。
3.flex-basis:定義項目的初始大小。可以是長度值(如 20%、10rem)或 auto(默認(rèn)值)。
總結(jié)
該文章在 2024/10/19 12:44:21 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |