作者:坐看末日之景L_170 | 来源:互联网 | 2020-08-24 11:22
在CSS的FlexBox中设置列的最小宽度用到的属性是min-width属性,min-width属性的语法是min-width:(宽度尺寸),比如,min-width:320px;就是设置最小宽度为320px。
如何使用CSS的FlexBox设置最小列宽?若要在FlexBox中指定列的最小宽度,需要使用min-width属性,下面我们来看具体的内容。
在CSS的FlexBox中设置列的最小宽度用到的属性是min-width属性,min-width属性的语法是min-width: (宽度尺寸),比如,min-width: 320px;就是设置最小宽度为320px。
.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。
以上就是本篇文章的全部内容了,更多相关的精彩内容可以移步到 第一PHP社区 的CSS视频教程栏目进一步学习!!!
以上就是如何设置CSS的FlexBox的最小列宽的详细内容,更多请关注 第一PHP社区 其它相关文章!