hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

怎样设置CSS的FlexBox的最小列宽【html5教程】

2019-11-26HTML搜搜PHP网46°c
A+ A-
怎样运用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网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
怎样设置CSS的FlexBox的最小列宽【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签: