flexbox——css伸缩布局
伸缩容器:设有“display:flex”或“display:inline-flex”的元素
伸缩项目:伸缩容器的子元素
主轴:沿着主轴伸缩项目
主轴长度:伸缩项目在主轴方向的宽度或者高度就是株洲长度,其属性是width或者height;侧周长度则是另一个;
测轴:垂直于主轴
指定元素为flex之后,用flex-row属性决定子元素是在一行还是在一列显示,可以定义关键词“wrap”指定内容容器在新的一行。
footer {
display: flex;
flex-flow: row wrap;
}
flex-flow:同时设定以下两个属性的缩写;这两个属性决定了伸缩容器的主轴和测轴
flex-direction:设定主轴方向;有row,row-reverse,colume,colume-recerse四个值,字面意思
flex-wrap:控制伸缩容器是单行还是多行,也决定了测轴方向新的一行的堆放方向,值有
nowrap:单行
wrap:多行
wrap-reverse:多行,方向相反
略
flex-start/baseline:从测轴开始对齐
flex-end:从测轴结束对齐
center:居中对齐
stretch:当item未设置高度时,伸缩项目拉伸,填满整个侧轴
用来设置项目沿主轴的对齐方式,从而调整伸缩项目之间的间距,设置了这个属性之后主轴方向的所有margin不会生效;
flex-start/baseline:从主轴开始对齐
flex-end:从主轴结束对齐
center:居中对齐
space-between:平均的分布在一行里,如果剩余空间是负数,或者该行只有一个伸缩项目,则等同于flex-start
space-around:
调整伸缩行的对齐方式,但是他会改变flex-wrap的行为;align-content和align-items相似,但是不是对齐伸缩项目而是对齐伸缩行
flex-start:起点堆叠,每一行紧靠上一行
flex-end:结束点堆叠,每一行紧靠下一行
center:居中堆叠,紧靠me一行;
space-between:平均分布,散开,紧靠起点和结束点;如果剩余空间为负数或者伸缩容器只有一行,则等效于center;
space-around:平均分布,两遍各一半空间,散开;如果剩余空间为负数或者伸缩容器只有一行,则等效于center;
stretch : 各行会伸展以占用剩余的空间,如果剩余空间是负数,则等效于flex-start
footer子元素的默认顺序是contact、links、copyright;
默认情况下所有伸缩项目的顺序组都是0,我们可以设置order值(可取负值),那么order大的会排在后面;
而html结构不会变化
flex-flow可以设置伸缩项目的流动方向,flex可以设置一个可用的空间
flex-grow:正值,设置扩展比率,即剩余空间为正值时,此伸缩项目相比其他项目能分配的空间比例;
flex-shrink:正值,收缩比率,剩余空间是负值时,此伸缩项目相对于其他项目收缩的空间比例
flex-basis:与width使用相同的值,指定伸缩基准值,
flex还有其他的值,其中"auto"和"initial"很有用;
flex:auto,相当于flex:1 1 auto ,伸缩容器中的伸缩项目将使用其大小根据任何width/height或者min-width/min-height设定,它将扩展占用一个比例的任何*空间可用,但在没有额外的*空间将缩小以适应其内容;
flex:initial ,相当于flex:0 1 auto,当有多余的空间时,子元素不在增大,但仍然需要收缩;
在使用flexbox之前,把所有页面元素(如nav,header,footer等)设置为"display:block",那么不支持的浏览器会按照顺序整块的序列,不会影响内容;
原文地址点击打开链接