上一讲我们谈的是盒子的容器实行,今天我们来聊一聊弹性盒子的项目属性;
*******************(1)顺序属性
order
属性,用于定义容器中项目的出现顺序。
顺序属性值,为整数,可以为负数,数字大小决定项目出现的先后顺序。
数字越小,排列越靠前,默认值为0。
****************************(2)长度属性
flex
属性,是广义上的长度属性。它包含了项目的放大属性、缩小属性和初始长度属性。
!!!!!!flex-grow
属性,用于定义容器中项目的相对放大比例。注意!在容器还有剩余空间时,项目才能体现出放大的效果。flex-grow
的属性值默认为0,没有放大效果,会展示默认长度。
与之相反,容器空间不足时,我们就需要使用缩小属性,来对项目进行收缩。
通过缩小属性flex-shrink,定义了容器中项目的相对缩小比例。
flex-shrink
的属性值默认为1,空间不足时,项目将缩小。
设置flex-shrink: 0;
时,即使容器空间不足,也可以保证项目不被压缩。
flex-basis
属性,用于定义容器中项目的初始长度。
当项目左右排列时,项目长度和宽度类似;
当项目上下排列时,项目长度和高度类似。
当项目左右排列时,若元素同时设置了flex-basis
属性和width
属性,flex-basis
的优先级更高。
前面,我们依次学习了flex-grow、flex-shrink
和flex-basis
属性。
实际上,我们经常使用它们的简写形式 flex
。
简写形式 flex
的属性值依次为: flex-grow、flex-shrink、flex-basis
。
在弹性布局时,我们经常会使用自适应布局。自适应布局会充分分配容器的尺寸,分为两种:
内敛的flex: 1;
、霸道的flex: auto;
。
flex: 1;
等同于设置flex: 1 1 0%;
。flex: 1;
的尺寸表现更为内敛,当项目未设置宽度时,其会优先牺牲自己的尺寸。简单来说,一般在等分布局时使用。
flex: auto;
等同于设置flex: 1 1 auto;
。flex: auto;
的尺寸表现更为霸道,当项目未设置宽度时,其会优先扩展自己的尺寸;简单来说,一般适合内容动态适配的布局。
******************************(3)单项目对齐属性。
单项目对齐属性align-self
,和垂直对齐属性类似,用于设置项目在垂直方向的对齐方式。
不同的是,align-self
,是为某个项目设置不同于其它项目的对齐方式。
单项目对齐属性align-self
会覆盖垂直对齐属性align-items
的值。