【flex】学习笔记/总结

 

 

CSS3 flex布局

查看兼容情况：
	caniuse.com

盒子模型：
	content-box：平时普通盒子模型，padding/border 会使盒子变大
			向外扩展
	border-box：盒子模型，padding/border 不会使盒子变大
			向内扩展

	指定方法：
		box-sizing:border-box

CSS 内置的计算函数 calc()	运算符前后必须加空格
	width: calc(25% - 2px)	v
	width: calc(100px-2px)	x
	加空格的原因是为了区分带连接符的属性比如 background-color

------------------------------------------------

父级：
	display: flex;
	以实现父级盒子元素内的弹性布局，只对一级子元素这一层有效
	浏览器兼容问题：添加里路兰奇前缀：-webkit-
	工程化方案中，使用插件自动化添加：postCss插件
	display: -webkit-box;
	*使用了弹性布局，子元素不再需要浮动float属性了

------------------------------------------------

父级盒子元素的主要属性：
	justify-content		子元素水平排列方式
		center		水平居中
		space-between	两端对齐
		space-around	间隔分布
		flex-start	居左（默认）
		flex-end	居右
	align-items		子元素垂直排列方式
		center		垂直居中
		flex-start	顶部
		flex-end	底部
	align-content		多行时的垂直排列方式
		center		垂直居中
		flex-start	顶部
		flex-end	底部
	flex-direction		排列方向
		row		横向排列
		row-reverse	横向逆向排列
		column		纵向排列
		column-reverse	纵向逆向排列
	*注意：用过 reverse 之后，水平/垂直 的属性变成 垂直/水平了
	flex-wrap			换行
		nowrap		不自动换行显示（默认）
		wrap		自动折行
	flex-flow：		上面两个属性的集合式写法
		column wrap

------------------------------------------------

子级元素的属性：
	flex:1;			表示子元素占比的系数，扣除指定width的元素及不指定任何宽度属性（文字显示出来时的自动大小）所剩余的所有宽度，分配给指定了 flex 的元素
	align-self:flex-start;	给子级某元素单独设垂直排列方式（其实就是覆盖父级元素的align-items）
	flex-grow:1;		定义子元素放大比例的系数
	order:0;		默认0，规定子元素顺序，由小到大，越小越靠前