flexbox——css伸缩布局

1术语

伸缩容器：设有“display：flex”或“display：inline-flex”的元素

伸缩项目：伸缩容器的子元素

主轴：沿着主轴伸缩项目

主轴长度：伸缩项目在主轴方向的宽度或者高度就是株洲长度，其属性是width或者height；侧周长度则是另一个；

测轴：垂直于主轴

2开始使用flex

指定元素为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：多行，方向相反

3主轴和测轴

略

4设置flexbox子元素的对齐

4.1 测轴对齐方式：align-items

flex-start/baseline：从测轴开始对齐

flex-end:从测轴结束对齐

center:居中对齐

stretch:当item未设置高度时，伸缩项目拉伸，填满整个侧轴

4.2主轴对齐：justify-content

用来设置项目沿主轴的对齐方式，从而调整伸缩项目之间的间距，设置了这个属性之后主轴方向的所有margin不会生效；

flex-start/baseline：从主轴开始对齐

flex-end:从主轴结束对齐

center:居中对齐

space-between:平均的分布在一行里，如果剩余空间是负数，或者该行只有一个伸缩项目，则等同于flex-start

space-around:

4.3 堆栈伸缩行：align-content

调整伸缩行的对齐方式，但是他会改变flex-wrap的行为；align-content和align-items相似，但是不是对齐伸缩项目而是对齐伸缩行

flex-start:起点堆叠，每一行紧靠上一行

flex-end：结束点堆叠，每一行紧靠下一行

center：居中堆叠，紧靠me一行；

space-between：平均分布，散开，紧靠起点和结束点；如果剩余空间为负数或者伸缩容器只有一行，则等效于center；

space-around：平均分布，两遍各一半空间，散开；如果剩余空间为负数或者伸缩容器只有一行，则等效于center；

stretch ： 各行会伸展以占用剩余的空间，如果剩余空间是负数，则等效于flex-start

5改变元素布局的顺序 order

footer子元素的默认顺序是contact、links、copyright；

默认情况下所有伸缩项目的顺序组都是0，我们可以设置order值（可取负值），那么order大的会排在后面；

而html结构不会变化

6 使元素具有弹性，flex-flow或者flex

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，当有多余的空间时，子元素不在增大，但仍然需要收缩；

7平稳退化：

在使用flexbox之前，把所有页面元素（如nav,header,footer等）设置为"display:block"，那么不支持的浏览器会按照顺序整块的序列，不会影响内容；

原文地址点击打开链接