html - 如何使用 flex css 获得最小宽度
问题描述
我有一个日历应用程序,我想选择几个月的间隔并显示它们。当我选择最多 3 个月时,这就是它的样子
...当我想显示更多时,看起来像那样。
我正在使用 css flex 并且我想为我的浏览器设置一个最大宽度以便很好地显示它们。我需要算法还是?
这是我的html
<div class="container-calendar1">
<ca-month-calendar *ngFor="let selectedMonth of selectedMonths" [month]="selectedMonth">
</ca-month-calendar>
<ca-month-calendar>
</ca-month-calendar>
</div>
和我的css文件
.container-calendar1{
display: flex;
flex: 2;
}
month-calendar {
margin:20px;
}
解决方案
使用flex-wrap: wrap;
和设置width:
任何你想要的
参见示例:
.flex-container {
display: flex;
flex-wrap: wrap;
width: 400px;
}
.flex-container > div {
background-color: DodgerBlue;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
推荐阅读
- multithreading - 如何将多线程应用于 Bio::SeqIO 翻译代码(Bioperl)?
- github - 使用 GraphQL [Javascript] 从 Github 存储库获取图像
- linux - 通过 CGI 执行 bash 脚本
- autocad - AutoCAD SCR 文件绘制多段线 - 结果不一致
- reactjs - 在 React 16 中无法通过 this.context 访问 contextType
- scala - 如何将该组列表的功能重新制作为简单递归?
- php - 在 WAMP 和 phppgadmin 上集成 postgreSQL
- javascript - 从 AngularJS 1.5 升级到 1.7 会抛出“无法复制!不支持复制 Window 或 Scope 实例”
- html - DevicePixelRatio 似乎突然与 Windows 比例叠加
- python - 获取二维数组中最近的坐标