28、移动网页设计中的Flexbox布局

移动网页设计中的Flexbox布局

1. Flex项目基础

在网页设计中，当将页面主体定义为弹性盒（flexbox）后，就需要处理弹性盒内项目的样式，以使其能够根据弹性盒容器进行扩展和收缩。

Flex项目的行为与浮动对象类似，但具有更多优势。可以在水平或垂直方向上浮动它们，还能改变其显示顺序。Flex项目的大小可以使用CSS的 width 和 height 属性固定，但也可以是“弹性的”，即自动调整大小以填充弹性盒。

弹性布局与网格布局有本质区别，需要以全新的方式考虑大小和布局。

2. 设置Flex基础大小

当项目允许“弹性变化”时，其渲染大小由三个属性决定：基础大小（basis size）、增长值（growth value）和收缩值（shrink value）。

基础大小通过 flex-basis 属性设置，语法如下：

flex-basis: size;

其中， size 可以是CSS的度量单位、弹性盒大小的百分比，或者关键字 auto （默认值），它会根据项目内容或其 width 、 height 属性的值来设置初始大小。

例如，将 aside 元素的初始大小设置为200像素：