帶你學習flex布局

2021-10-23 16:38:40 字數 992 閱讀 5966

詳見 阮一峰老師部落格

flex布局即為彈性盒子布局,採用flex布局的元素,稱為 flex容器,簡稱"容器",它的所有子元素自動成為容器成員,稱為 flex專案,簡稱 「專案」。

1.flex-direction主軸的方向(即專案的排列方向)

2.flex-wrap換行方式

3.flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性簡寫形式,預設為 row nowrap

4.justify-content屬性 專案在主軸上的對齊方式

5.align-items:專案在交叉軸上如何對齊

6.align-content:多個軸線的對齊方式

1.order:專案的排列順序,數值越小,排列越靠前,預設為0;

2.flex-grow:專案的放大比例,預設為0,如果存在剩餘空間,也不放大;

3.flex-shrink:專案縮小比例,預設為1,空間如果不足,該空間將縮小

如果所有專案的flex-shrink的屬性都為1,當空間不足時都將等比例縮小,當其中乙個專案為0,其他專案都是1,則空間不足時,前者不縮小。(負值無效)

4.flex-basis:分配多餘空間之前,專案佔據的主軸空間。預設值為auto,即專案的本來大小。

5.flex:flex-grow、flex-shrink和flex-basis的簡寫,預設為 0 1 auto

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

flex布局學習

內容 flex 是 flexible box 的縮寫,意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為 flex 布局。設為 flex 布局以後,子元素的float clear和vertical align屬性將失效 採用 flex 布局的元素,稱為 flex 容器 flex...

flex布局學習

flex flexible box 是一種彈性布局,用於盒狀模型 任何一種容器都可以指定為flex布局 box注意 行內元素使用display flex 會變成塊級元素 行內元素可以使用inline flex進行flex布局 box注意 設定為flex布局之後,子元素的float clear和ver...

flex布局 Flex布局

摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫,意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...