在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
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="flex-column-min-width.css" /> </head> <body> <div class="container"> <div class="frameLeft">左侧的内容笔墨<br />内容内容<br />内容内容</div> <div class="frameCenter">中间的内容笔墨<br />内容内容<br /></div> <div class="frameRight">右侧的内容笔墨<br />内容内容<br />内容内容</div> </div> </body> </html>
显现结果:
运用Web浏览器显现上述HTML文件。将显现以下所示的结果。左列和右列的宽度以及中间列的宽度为1:3。
减小Web浏览器的窗口宽度。三列宽度的比例稳定,每列的宽度压缩,结果以下。
另外,减少窗口宽度会缩窄框架的宽度,但摆布框架的宽度不会小于160像素,只要中间框架的宽度变窄,以下图所示。
因为中间框架还具有不窄于320像素的设置,假如窗口宽度变成640像素(左框架160px +中框架320px +右框架160px)或更小,则将显现程度滚动条,以下图所示。
以上就是本篇文章的全部内容了,更多相干的精彩内容能够移步到ki4网的CSS视频教程栏目进一步进修!!!
以上就是怎样设置CSS的FlexBox的最小列宽的细致内容,更多请关注ki4网别的相干文章!