CSS Flex布局和浮动及Position属性

CSS Flex布局、浮动及Position属性

💡

笔记

一、CSS Flex布局速查表

属性	参数	功能
display	flex	将容器设置为弹性盒模型，其子元素将被视为弹性项目。
flex-direction	row (默认)	弹性项目沿水平方向从左到右排列。
ㅤ	row-reverse	弹性项目沿水平方向从右到左排列。
ㅤ	column	弹性项目沿垂直方向从上到下排列。
ㅤ	column-reverse	弹性项目沿垂直方向从下到上排列。
flex-wrap	nowrap (默认)	所有弹性项目都将在一行内显示，即使超出容器宽度。
ㅤ	wrap	弹性项目在需要时换行，新行会在垂直方向排列。
ㅤ	wrap-reverse	类似于wrap，但新行会在垂直方向逆序排列。
flex-flow	<flex-direction>	ㅤ
justify-content	flex-start (默认)	弹性项目在主轴（main axis）起点位置对齐。
ㅤ	flex-end	弹性项目在主轴终点位置对齐。
ㅤ	center	弹性项目在主轴居中对齐。
ㅤ	space-between	弹性项目之间等分空间，第一项和最后一项紧贴容器边缘。
ㅤ	space-around	每个弹性项目前后都有相等的空间，但首尾两个项目的内部空间是其他项目的半倍。
align-items	stretch (默认)	弹性项目沿交叉轴（cross axis）拉伸以适应容器高度。
ㅤ	flex-start	弹性项目沿交叉轴起点对齐。
ㅤ	flex-end	弹性项目沿交叉轴终点对齐。
ㅤ	center	弹性项目沿交叉轴居中对齐。
ㅤ	baseline	弹性项目沿基线对齐。
align-content	stretch (默认)	多根轴线（多行）将被拉伸以填充剩余空间。仅当有多行时有效。
ㅤ	flex-start	多根轴线沿交叉轴起点对齐。
ㅤ	flex-end	多根轴线沿交叉轴终点对齐。
ㅤ	center	多根轴线沿交叉轴居中对齐。
ㅤ	space-between	多根轴线之间的间距均匀分布。
ㅤ	space-around	每根轴线周围的空间均匀分布。

对于弹性项目：

属性	参数	功能
order	<integer>	定义项目的排列顺序。数值越小，排列越靠前，默认值为0。
flex-grow	<number>	定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink	<number>	定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis	auto (默认)	定义了在分配多余空间之前，项目占据的主轴空间。
ㅤ	<length>	固定宽度或高度（取决于主轴方向）。
ㅤ	<percentage>	百分比宽度或高度（取决于主轴方向）。
flex	none	`flex-grow`, `flex-shrink` 和 `flex-basis` 的简写。默认值为0 1 auto。
align-self	auto	允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

二、CSS 浮动属性速查表

属性	参数	功能
float	left	元素向左浮动，文本和其他内容会沿着元素的右边环绕。
ㅤ	right	元素向右浮动，文本和其他内容会沿着元素的左边环绕。
ㅤ	none (默认)	元素不浮动，并保持在文档流中的正常位置。
clear	none (默认)	默认情况下，元素不会清除任何浮动。
ㅤ	left	清除左侧浮动的影响。
ㅤ	right	清除右侧浮动的影响。
ㅤ	both	同时清除左右两侧浮动的影响。

三、CSS Position属性速查表

属性	参数	功能
position	static (默认)	元素按照正常的文档流定位，position的其他属性不起作用。
ㅤ	relative	元素相对于其正常位置进行定位，移动该元素不影响文档流中后续元素的位置。
ㅤ	absolute	元素脱离文档流，相对于最近的非static定位祖先元素进行定位。如果没有这样的祖先，则相对于初始包含块（通常是视口）。
ㅤ	fixed	元素脱离文档流，相对于浏览器窗口进行定位，滚动页面时元素位置固定不变。
ㅤ	sticky	元素根据用户的滚动位置来定位，它基于用户滚动的位置在相对定位和固定定位之间切换。