【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，规定子元素顺序，由小到大，越小越靠前
巴特西

【flex】学习笔记/总结

最新文章

热门文章
