display:flex;
flex-disrection
屬性:
justify-content
屬性:
*center 水平居中對齊
align-items
屬性:
flex-wrap
屬性:
flex-shrink
屬性:flex-shrink
值為1,而另乙個專案的flex-shrink
值為3,則值為的專案3將縮小為另乙個專案的3倍
flex-grow
屬性:flex-grow
值為1,而另乙個專案的flex-grow
值為3,則值為的專案3將放大為另乙個專案的3倍
flex-basis
屬性:指定flex-shrink
或flex-grow
的初始大小。
flex-basis:20em;
flex
屬性:
flex:1 1 150px;
引數位置關係
flex:flex-grow flew-shrink flex-basis;
order
屬性:order小的值會排在order值大的前面,可以使用負數
align-self
屬性:align-self接受與align-items該align-items屬性相同的值,並將覆蓋該屬性設定的任何值
Flex布局 容器屬性(總結)
y豎向x橫向 元素的排列方向 flex direction row 預設樣式,從左到右排列 flex direction row reverse 從右到左排列 flex direction column 從下到上排列 flex direction column reverse 從下到上排列 設定是否...
flex布局基礎入門總結 容器屬性)
div flex 將物件作為彈性伸縮盒顯示,inline flex 將物件作為內聯塊級彈性伸縮盒顯示 寬度撐開 div row 預設值 主軸為水平方向,起點在左端 row reverse 主軸為水平方向,起點在右端 column 主軸為垂直方向,起點在上沿 column reverse 主軸為垂直方...
CSS flex 布局 一些基本屬性應用
box orient box pack box align box direction box lines box orient horizontal vertical inline axis block axis 預設值 horizontal 適用於 伸縮盒容器 繼承性 無 動畫性 否 計算值 指...