wap版网站 加app提示,媚娘直播,湖州微信网站建设,宜兴市城乡建设局网站上一讲我们谈的是盒子的容器实行#xff0c;今天我们来聊一聊弹性盒子的项目属性#xff1b;
*******************#xff08;1#xff09;顺序属性
order属性#xff0c;用于定义容器中项目的出现顺序。
顺序属性值#xff0c;为整数#xff0c;可以为负数#xff…上一讲我们谈的是盒子的容器实行今天我们来聊一聊弹性盒子的项目属性
*******************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的值。
