Flex布局微整理

Posted 2022-04-02 bubu-sourire

Flex布局

 

 

必记属性

 

flex-container 属性
flex-direction　　方向	：row　　从左往右  （默认一行一行展示）
	：row-reverse　　从右往左  （反向）
	：column 　　从上往下  （一列一列展示）
	：column-reverse　　从下往上  （反向）
flex-wrap　换行	：wrap　　换行
	：no-wrap　　不换行（默认此状态）
flex-flow　　方向与换行的简写	：direction wrap
justify-content　　主轴方向对齐方式	：space between　　空间放在中间
	：space around　　空间放在周围
	：flex-start　　往起点靠
	：flexend　　往终点靠
	：center　　居中
align-items　　侧轴方向对齐方式	：strech　　伸展（高度不定，所有元素的高度以最高的为准）
	：flex-start　　往侧轴的起点靠
	：flex-end　　往侧轴的终点靠
	：center　　居中
align-content　　多行/列内容对齐方式	stretch；flex-start；flex-end；center；space-between；space-around

 

flex-item属性
flex-grow	增长比例（空间过多时） .child:nth(1)flex-grow:2 .child:nth(2)flex-grow:1 .child:nth(3)flex-grow:3
flex-shrink	收缩比例（空间不够时）
flex-basis	默认大小或按照修改的样式显示
flex	：grow shrink basis （三者简写）
order	顺序
align-self	自身对齐方式（可单独修改自身的对齐方式）

 

　　

注：示例图片并非代码呈现，如有错误请帮忙指出，谢谢！