flex佈局常用
阿新 • • 發佈:2019-01-12
1.flex-direction:決定主軸方向
row:主軸為水平方向。排列為從左至右。
column:主軸為豎直方向。排列為從上至下。
row-reverse:主軸為水平方向。排列為從右至左。
column-reverse:主軸為豎直方向。排列為從下至上。
2.flex-wrap:預設情況,排列在一條線上,即主軸上,flex-wrap決定當排列不下時是否換行以及換行的方式
nowrap:自動縮小專案,不換行。
wrap:換行,第一行在上。
wrap-reverse:換行,第一行在下。
3.justify-content 決定子元素在主軸上的對齊方式
flex-start:左對齊。
flex-end:右對齊。
space-betwenn:兩端對齊。
space-around:沿軸線均勻分佈。
4.align-items 決定子元素在交叉軸的對其方式
flex-start:頂端對齊。
flex-end:底部對齊。
center:豎直方向居中對齊。
stretch:如子元素未設定高度,子元素將和容器等高對齊。
5.align-content 該屬性定義了當有多根主軸時,即子元素不止一行時,多行在交叉軸軸上的對齊方式。注意當有多行時,定義了align-content後,align-items屬性將失效
flex-start:左對齊。
flex-end:右對齊。
center:居中對齊。
space- between:兩端對齊。
space-around:沿軸線均勻分佈。
stretch:各行將根據其flex-grow值伸展以充分佔據剩餘空間。
5.flex-grow
定義了當flex容器有多餘空間時,子元素是否放大。預設值為0,即當有多餘空間時也不放大;可能的值為整數,表示不同的子元素的放大比例。