css属性之flex属性
规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。是一个简写属性,可以同时设置flex-grow,flex-shrink,flex-basis三个子属性。 <span style="color: #008000">/<span style="color: #008000"> One value,unitless number: flex-grow <span style="color: #008000">/<span style="color: #000000">
flex: <span style="color: #800080">2<span style="color: #000000">; <span style="color: #008000">/<span style="color: #008000"> One value,width/height: flex-basis <span style="color: #008000">/<span style="color: #000000"> flex: 10em; flex: 30px; <span style="color: #008000">/<span style="color: #008000"> Two values: flex-grow | flex-basis <span style="color: #008000">/<span style="color: #000000"> flex: <span style="color: #800080">1<span style="color: #000000"> 30px; <span style="color: #008000">/<span style="color: #008000"> Two values: flex-grow | flex-shrink <span style="color: #008000">/<span style="color: #000000"> <span style="color: #008000">/<span style="color: #008000"> Three values: flex-grow | flex-shrink | flex-basis <span style="color: #008000">/<span style="color: #000000"> <span style="color: #008000">/<span style="color: #008000"> Global values <span style="color: #008000">/<span style="color: #000000"> 语法 flex属性可以指定1个,2个或三个值。 单值语法: 值必须为以下其中之一:
双值语法:第一个值必须为一个无单位数,并且它会被当作
三值语法:
默认情况下,元素不会缩短至小于内容框尺寸,若想改变这一状况,请设置元素的min-width与min-height属性。 定义弹性盒子项(flex item)的拉伸因子。初始值0,负值无效 指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值 初始值为1,负值无效 指定了flex元素在主轴方向上的初始大小。如果不使用box-sizing来改变盒模型的话,那么这个属性就决定了flex元素的内容盒(content-box)的宽或者高(取决于主轴的方向)的尺寸大小。默认值0% ; 是否是继承属性: 否;值类型:a length,百分比 或calc() 取值 <'width'>: width值可以使一个数字后面跟着绝对单位例如px,mm,pt; 该值也可以使一个百分数,那么这个百分数就是相对于其父弹性盒容器的宽或者高(取决于主轴方向),负值是不被允许的。 content:基于flex的元素自动调整大小。 ---<span style="color: #008000">/<span style="color: #008000"> Intrinsic sizing keywords <span style="color: #008000">/<span style="color: #000000"> flex-<span style="color: #000000">basis: fill; flex-basis: max-<span style="color: #000000">content; flex-basis: min-<span style="color: #000000">content; flex-basis: fit-<span style="color: #000000">content; <span style="color: #008000">/<span style="color: #008000"> Automatically size based on the flex item’s content <span style="color: #008000">/<span style="color: #000000"> <span style="color: #008000">/<span style="color: #008000"> Global values <span style="color: #008000">/<span style="color: #000000"> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |