css3中，弹性盒子是一种布局方式，为了让页面适应不同的屏幕大小以及设备类型，进而提供一种更加有效的方式来分配空间；可以利用display属性来定义弹性盒子，语法为“display:flex”或者“display:inline-flex”。
本教程操作环境：windows10系统、CSS3&&HTML5版、Dell G3电脑。
什么是css3弹性盒子
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
立即学习“前端免费学习笔记（深入）”；
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
以下元素展示了弹性子元素在一行内显示，从左到右:
示例如下：
123 .flex-container { display: -webkit-flex; display: flex; width: 400px; height: 250px; background-color: lightgrey;}.flex-item { background-color: cornflowerblue; width: 100px; height: 100px; margin: 10px;}flex item 1flex item 2flex item 3
输出结果：
（学习视频分享：css视频教程）
以上就是什么是css3弹性盒子的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1623416.html
微信扫一扫 
支付宝扫一扫 
