HTML+CSS常见布局面试题总结

弹性盒模型新版布局display:flex;display:-webkit-flex;display:inline-flex; display:-webkit-inline-flex; 其中常用属性总结如下: 1.flex-direction属性用于设置伸缩项目的排列方式，其中有四个属性可以设置，row(设置从左到右 排列)、row-reverse(设置从右到左排列)、column(设置从上到下排列)、column-reverse( 设置从下到上排列)。 2.flex-wrap属性设置项目的换行方式(当容器宽度不足以容纳所有子项目时)。其中有三个属性可以设置， nowrap(默认值，都在一行或者一列中显示)、wrap(伸缩项目无法容纳时，自动换行)、 wrap-reverse(伸缩项目无法容纳时，自动换行，方向和wrap相反)。 3.flex-flow属性是flex-direction和flex-wrap属性的速记属性。 4.justify-content在当灵活容器内的各项没有占用主轴上所有可用的空间时对齐容器内的各项。(水平) 其中有四个属性可以设置，flex-start(伸缩项目以起始点靠齐)、center(伸缩项目以中心点靠齐)、 flex-end(伸缩项目以结束点靠齐)、space-between(伸缩项目平均分布)、space-around( 伸缩项目平均分布，但两端保留一半的空间)。 5.align-items属性规定灵活容器内的各项的默认对齐方式，和旧版中的box-align一样，处理伸缩 项目容器的额外空间。其中有五个属性可以设置，flex-start(伸缩项目以顶部为基准，清理下部的额外 空间)、center(伸缩项目以中部为基准，平均清理上下部的额外空间)、flex-end(伸缩项目以底部 为基准，清理上部的额外空间)、baseline(伸缩项目以基线为基准，清理额外的空间)、stretch( 伸缩项目填充整个容器，默认值)。 6.align-self和align-items一样，都是清理额外空间，但它是单独设置某一个伸缩项目的。所有的 值和align-items一致。 7.flex属性和旧版本中的box-flex类似，用来控制伸缩容器的比例分配。 8.order属性和旧版本的box-ordinal-group属性一样控制伸缩项目出现的顺序。