灵活框（flexbox）

弹性盒子（Flexbox）是CSS3中引入的一种强大且兼容性好的布局方法，它可以让你轻松地处理页面上的元素布局，并创建可以自动缩小和放大的动态用户界面。使用弹性盒子布局模型，可以告别浮动，完美实现垂直水平居中，提高页面排版的灵活性和效率。
弹性盒子布局模型主要包括容器属性（container properties）和项目属性（item properties）。容器属性主要包括display（设置为flex）、flex-direction（主轴方向）、flex-wrap（换行方式）、flex-flow（flex-direction和flex-wrap的简写形式）、justify-content（项目在主轴上的对齐方式）、align-items（项目在交叉轴上的对齐方式）、align-content（多行项目在交叉轴上的对齐方式）等。项目属性主要包括order（项目在容器中的顺序）、flex-grow（项目的放大比例）、flex-shrink（项目的缩小比例）、flex-basis（项目的基准尺寸）、flex（flex-grow、flex-shrink和flex-basis的简写形式）等。
使用弹性盒子布局模型非常简单，首先需要设置容器元素的display属性为flex，然后根据需要设置其他容器属性，如flex-direction、flex-wrap、justify-content、align-items等。接着，为项目元素设置相应的属性，如order、flex-grow、flex-shrink、flex-basis等。
关于弹性盒子布局模型的学习资料，可以参考以下资源：