css3中的弹性盒子是什么意思

这篇文章主要介绍css3中的弹性盒子是什么意思，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

公司主营业务：网站设计、成都网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联公司推出宁城免费做网站回馈大家。

css3中，弹性盒子是一种布局方式，为了让页面适应不同的屏幕大小以及设备类型，进而提供一种更加有效的方式来分配空间；可以利用display属性来定义弹性盒子，语法为“display:flex”或者“display:inline-flex”。

本教程操作环境：windows10系统、CSS3&&HTML5版、Dell G3电脑。

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

以下元素展示了弹性子元素在一行内显示，从左到右:

示例如下：

 
 




  flex item 1