设置CSS的FlexBox最小列宽的方法-创新互联

本篇文章和大家了解一下设置CSS的FlexBox最小列宽的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

在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

  
  
  


  

    
左边的内容文字
内容内容
内容内容
    
中间的内容文字
内容内容

    
右边的内容文字
内容内容
内容内容
  

显示结果：

使用Web浏览器显示上述HTML文件。将显示如下所示的效果。左列和右列的宽度以及中间列的宽度为1：3。

减小Web浏览器的窗口宽度。三列宽度的比例不变，每列的宽度收缩，效果如下。

此外，缩小窗口宽度会缩窄框架的宽度，但左右框架的宽度不会小于160像素，只有中心框架的宽度变窄，如下图所示。

由于中心框架还具有不窄于320像素的设置，如果窗口宽度变为640像素（左框架160px +中框架320px +右框架160px）或更小，则将显示水平滚动条，如下图所示。

关于设置CSS的FlexBox最小列宽的方法就分享到这里了，希望以上内容可以对大家有一定的参考价值，可以学以致用。如果喜欢本篇文章，不妨把它分享出去让更多的人看到。