提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > 怎样设置CSS的FlexBox的最小列宽【css教程】,FlexBox

怎样运用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

<!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网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"怎样设置CSS的FlexBox的最小列宽【css教程】,FlexBox"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线