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

程序员文章站 2022-04-27 10:04:40

...

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

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

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

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

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

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

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

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

以上就是本篇文章的全部内容了，更多相关的精彩内容可以移步到的CSS视频教程栏目进一步学习！！！

以上就是如何设置CSS的FlexBox的最小列宽的详细内容，更多请关注其它相关文章！

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

利用css3如何设置没有上下边的列表间隔线

详解C#设置Excel数据自适应行高、列宽的2种情况

【实战】如何通过html+css+mysql+php来快速的制作动态网页（以制作一个博客网站为列）

ie和firefox中通用的设置div最小高度和达到这一最小高度后自适应的css代码

Python使用OpenPyXl设置Excel表格中的单元格大小（行高和列宽）

WPS表格2013如何固定单元格的列宽禁止他人随便调整

Excel2010中如何设置斜线标题即行标题和列标题分开的斜线

PyQt5 技术篇-设置QTableWidget表格组件默认值实例演示，如何获取QTableWidget表格组件里的值，获取表格的行数和列数

ATI显卡如何设置宽屏显示的比例

C# 设置Excel数据自适应行高、列宽的2种情况