彈性盒布局:display:flex; display:inline-flex;(兩個元素會在一行顯示)
作用: 控制子集在"主軸"上排列
顯示規則:所有的子元素都會在主軸上排列
預設x為主軸
如果設定x為主軸,那y為側軸
如果設定y為主軸,那麼x為側軸
設定方法: 父元素必須為彈性盒 display:flex;
設定為display:flex;
1: 彈性盒,子元素預設在主軸排列,預設x為主軸
2: 父級元素為彈性盒,子元素都能設定寬高
3: 父元素為彈性盒,讓子元素在彈性盒中上下左右居中,只需要設定margin:auto;
設定display:flex / inline-flex;對子元素的影響
子元素的float 和 clear 無效
vertical-align(元素垂直對齊方式)無效
容器(父元素)
屬性:flex-direction:;設定主軸
row 水平方向主軸
row-reverse 水平反向主軸
column 垂直主軸
column-reverse 垂直反向主軸
flex-wrap:;子元素是否換行
nowrap 不換行
wrap 換行
wrap-reverse 反向換行
flex-flow:;設定主軸 是否換行
justify-content:;子元素在主軸上的對齊方式
flex-start 起始位置
flex-end 終點位置
center 居中
space-around 完全自動分配
space-between 兩端對齊,中間自動分配
align-items:;子元素在側軸上的對齊方式
flex-start 起始位置
flex-end 終點位置
center 居中
baseline 基線對齊
stretch 預設位置對齊
align-content:;多行元素在側軸上的對齊方式,多行元素才有效
flex-start 起始位置
flex-end 終點位置
center 居中
space-around 完全自動分配
space-between 兩端對齊,中間自動分配
stretch 預設位置對齊
專案(子元素)
屬性:
align-self:;子元素在側軸上的對齊方式
flex-start 起始位置
flex-end 終點位置
center 居中
stretch 拉伸(此元素不設定寬度或者高度)
auto 預設值
注意:如果父元素有此屬性設定,則繼承alig-items:;屬性設定
order:;數值越大,子元素越靠後
flex布局及相關屬性
flex direction屬性，決定主軸的方向 即專案的排列方向 box flex wrap屬性，預設情況下，專案都排在一條線 又稱 軸線 上。flex wrap屬性定義，如果一條軸線排不下，如何換行。box flex flow屬性，flex flow屬性是flex direction屬性和fle...
flex布局以及相關屬性
容器的屬性 父元素設定display flex 子元素即可使用flex布局。flex direction 決定專案排列方向 flex wrap 一條軸線排不下，如何換行 boxjustify content 專案在主軸上的對齊方式 水平居中時，可以使用這個屬性實現。垂直居中可以用這個屬性實現。ali...
flex屬性取值
第一種情況flex屬性不寫 flex屬性預設是0 1 auto flex grow為0，則存在剩餘空間也不放大 flex shrink為1，則空間不足該專案縮小 flex basis為auto，則該專案本來的大小 原始 parent parent div item 1 item 2 style cl...