flex布局属性速查表

box{   display: flex; }	任何一个容器都可以指定为Flex布局。 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
.box{   display: inline-flex; }	行内元素也可以使用Flex布局。
.box{   display: -webkit-flex; /* Safari */   display: flex; }	Webkit内核的浏览器

 

	容器的属性		元素的属性
	flex-direction	设置内部元素的在主轴上的排列方向 默认值 1). row  将元素水平排列(默认不换行)，除非设置flex-wrap 一般值: 2）、row-reverse、3）、column 其它值:	order
	flex-wrap	默认值:nowrap, 不换行设, 置水平换行方式	flex-grow	默认为0，即 即使存在剩余空间，也不会放大； 如果容器有剩余空间，控制元素放大抢占的比例，会根据水平或垂直方向抢占 理解参考
	flex-flow	联合属性, 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。	flex-shrink	空间不足时,产生效果. 默认为1，子元素宽度之和超出父元素宽度, 用于设置每个元素缩小的比率 flex-shrink：0 表示当前元素不缩小. 换句话说: 如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
	justify-content	对齐设置属性 容器内元素水平对齐方式即主轴上元素的对齐方式，和 flex-start | flex-end | center | space-between | space-around; flex-start 右对齐: 起始点对齐,默认左对齐 space-between 两端对齐 space-around  空间均匀分配,两端有间距	flex-basis	默认值：auto number: 一个长度单位或者一个百分比，规定灵活项目的初始长度。如:px % 项目占据的主轴空间（main size）。
	align-items	对齐设置属性,对容器进行设置，使内部元素垂直对齐方式 flex-direction: row; //默认，不写也一样 align-items: center; //垂直居中设置	flex	联合属性：flex-grow、flex-shrink、flex-basis三个属性的缩写 默认值是 0 1 auto  //有空余空间,元素不会放大, 超出父元素缩小. flex:1 = 1 1 0%
	align-content	相当于多行内容的水平对齐方式,继承justify-content,注意:如果容器内只有1行,此属性不起作用	align-self

 

附录 CSS定位相关属性, 2021参考 w3schoo 共14个

display 3个常用的的属性

 

属性名	属性值
display	none
	block	1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行） 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
	inline	1、和其他元素都在一行上； 2、元素的高度、宽度及顶部和底部边距不可设置； 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
	inline-block	内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点。 1、和其他元素都在一行上； 2、元素的高度、宽度、行高以及顶和底边距都可设置。