教你用css3实现图片容器内等比缩放,教你用c3实现图片容器内等比缩放......
2023-03-16 296 CSS
HTML5&CSS3：[1]如何使用Flexbox伸缩盒
来源：互联网
2023-03-16 19:17:37 299
Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式，它可以轻松实现以往需要多个相互配合才能实现的功能，下面就简单介绍一下flexbox的应用。（下面的例子都是在chrome上实现的，如果需要在其它浏览器上应用，请在相关css3属性上加上对应的前缀）
工具/原料
- chrome
方法/步骤
新建一个页面
![HTML5&CSS3：[1]如何使用Flexbox伸缩盒](https://exp-picture.cdn.bcebos.com/82eff6d7592ae3ef84fd588254b6326c566664d8.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
给flex-box加上样式，默认效果如图
![HTML5&CSS3：[1]如何使用Flexbox伸缩盒](https://exp-picture.cdn.bcebos.com/562787cf02532f634f00ac85699147e832e05cd8.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
![HTML5&CSS3：[1]如何使用Flexbox伸缩盒](https://exp-picture.cdn.bcebos.com/e3d059e833e039724f86f759b5863048604356d8.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
给flexbox加上flex样式，可以看到图片中三个box从左到右横排，也就是float属性
![HTML5&CSS3：[1]如何使用Flexbox伸缩盒](https://exp-picture.cdn.bcebos.com/3fc72e486143d7d430b448587da75f0f832b50d8.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
属性flex-direction可以决定呈现的方向，默认是row
flex-direction: column;box会竖排，如图
![HTML5&CSS3：[1]如何使用Flexbox伸缩盒](https://exp-picture.cdn.bcebos.com/5e4e9c2b74ee1c32349d1d9f07f1d8a727334bd8.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
![HTML5&CSS3：[1]如何使用Flexbox伸缩盒](https://exp-picture.cdn.bcebos.com/cca2552c56ee7b7f0f8b30c66ef4fcf5ef0d41d8.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
属性flex-wrap决定容器是否会换行
如果flex-wrap: wrap;，那如果容器不够大，放不下的box会换行
![HTML5&CSS3：[1]如何使用Flexbox伸缩盒](https://exp-picture.cdn.bcebos.com/e4b5e2f5ee0d3ace25523ed887e265e7350fbbd8.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
![HTML5&CSS3：[1]如何使用Flexbox伸缩盒](https://exp-picture.cdn.bcebos.com/1562a0b9763e21c22253ad63e6e89a618725b1d8.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
justify-content可以实现box对其
比如居中可以 justify-content: center 效果如下图
![HTML5&CSS3：[1]如何使用Flexbox伸缩盒](https://exp-picture.cdn.bcebos.com/e09173e89a618625df16825b3b04541bd00faad8.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
![HTML5&CSS3：[1]如何使用Flexbox伸缩盒](https://exp-picture.cdn.bcebos.com/f367139a310e17994eaff60bc9406afec214a3d8.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
接下来演示一下flexbox的伸缩性，这里需要用到flex属性
稍微修改一下页面，可以控制每一个box的样式。
![HTML5&CSS3：[1]如何使用Flexbox伸缩盒](https://exp-picture.cdn.bcebos.com/6bbfdd14f1c595eeef44fb9427530688902c9ad8.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
然后给item1~3加上flex，效果如下图
![HTML5&CSS3：[1]如何使用Flexbox伸缩盒](https://exp-picture.cdn.bcebos.com/dda98e4800fc77f7208b1393c8715fdb372090d8.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
![HTML5&CSS3：[1]如何使用Flexbox伸缩盒](https://exp-picture.cdn.bcebos.com/5e9a2820b93acd899f406abc0335dd8a58de8bd8.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
如果拉伸页面，可以看到3个box也按比例随之适应新的宽度
![HTML5&CSS3：[1]如何使用Flexbox伸缩盒](https://exp-picture.cdn.bcebos.com/95bd4e8c9bcec7f845f2116e034ce54a2e27fbd8.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
如果需要某一个box宽固定，就给它一个width值，那伸缩式该box不会改变宽度
![HTML5&CSS3：[1]如何使用Flexbox伸缩盒](https://exp-picture.cdn.bcebos.com/e40b3127e7ef2806bd84de6eb840b6f39087f2d8.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
注意事项
- 更多css3属性的内容请搜索相关关键字
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： CSS
上一篇：CSS实现文字过长显示省略号 下一篇：div+css制作表格（1）”div“应用
相关文章
- 详细阅读
-
怎么用div布局加css样式做网页详细阅读
怎么用div布局加css样式做网页,怎么做一个网页呢，静态页面的制作是很简单的，我们来看看怎么通过div布局 c样式来制作一个网页吧。......
2023-03-16 449 CSS
-
css基础教程：[1]为网页使用网络字体详细阅读
![css基础教程：[1]为网页使用网络字体](https://exp-picture.cdn.bcebos.com/cca2552c56ee7b7f34c65fc66ef4fcf5ef0d411f.jpg)
css基础教程：[1]为网页使用网络字体,本教程为大家介绍在网页上怎么使用网络字体。1，使用网络字体的好处是所有人看到的效果都是样的，效果统一，2，不依赖于用户电脑上是否安装了该字体。......
2023-03-16 293 CSS