如何设置CSS的FlexBox的最小列宽

来源：动视网责编：小采时间：2020-11-02 22:13:26

如何设置CSS的FlexBox的最小列宽

如何设置CSS的FlexBox的最小列宽:如何使用CSS的FlexBox设置最小列宽？若要在FlexBox中指定列的最小宽度，需要使用min-width属性，下面我们来看具体的内容。在CSS的FlexBox中设置列的最小宽度用到的属性是min-width属性，min-width属性的语法是min-width: （宽度尺寸），比如，mi

推荐度：

点击下载本文 文档为doc格式

导读如何设置CSS的FlexBox的最小列宽:如何使用CSS的FlexBox设置最小列宽？若要在FlexBox中指定列的最小宽度，需要使用min-width属性，下面我们来看具体的内容。在CSS的FlexBox中设置列的最小宽度用到的属性是min-width属性，min-width属性的语法是min-width: （宽度尺寸），比如，mi

如何使用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。