如何使用CSS的FlexBox设置最小列宽？若要在FlexBox中指定列的最小宽度，需要使用min-width属性，下面我们来看具体的内容。
在CSS的FlexBox中设置列的最小宽度用到的属性是min-width属性，min-width属性的语法是min-width: （宽度尺寸），比如，min-width: 320px;就是设置最小宽度为320px。
首先我们来看一下min-width属性的语法格式：
min-width: （宽度尺寸）
宽度的尺寸可以使用CSS的尺寸规范指定。
立即学习“前端免费学习笔记（深入）”；
我们来看一个具体的例子
代码示例：
编写以下代码
CSS代码：
flex-column-min-width.css
.container { display: flex;}.frameLeft { border: 1px solid #e9006b; background-color:#fddceb; min-width:160px; flex: 1;}.frameCenter { border: 1px solid #0158c2; background-color: #ccdff6; min-width: 320px; flex: 3;}.frameRight { border: 1px solid #d44100; background-color: #ffe4af; min-width: 160px; flex: 1;}
HTML代码：
flex-column-min-width.html
内容内容
内容内容中间的内容文字
内容内容右边的内容文字
内容内容
内容内容
显示结果：
使用Web浏览器显示上述HTML文件。将显示如下所示的效果。左列和右列的宽度以及中间列的宽度为1：3。
减小Web浏览器的窗口宽度。三列宽度的比例不变，每列的宽度收缩，效果如下。
此外，缩小窗口宽度会缩窄框架的宽度，但左右框架的宽度不会小于160像素，只有中心框架的宽度变窄，如下图所示。
由于中心框架还具有不窄于320像素的设置，如果窗口宽度变为640像素（左框架160px +中框架320px +右框架160px）或更小，则将显示水平滚动条，如下图所示。
以上就是本篇文章的全部内容了，更多相关的精彩内容可以移步到创想鸟的CSS视频教程栏目进一步学习！！！
以上就是如何设置CSS的FlexBox的最小列宽的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1613659.html
微信扫一扫 
支付宝扫一扫 
