css - 可缩放的 CSS 正方形
问题描述
我对width
/height
和使用flexbox
. 我一直试图让每个div
都是一个紫色的正方形,但它似乎裁剪成文本的大小。我希望每种颜色在调整大小时都保持方形,但只是缩小比例。
.dark-box
{
background: #8f6cda;
text-align: center;
text-decoration: none;
color: #ffffff;
font-family: 'verdana';
}
.med-box
{
background: #a68fd8;
text-align: center;
text-decoration: none;
color: #ffffff;
font-family: 'verdana';
}
.light-box
{
background: #b5a5d7;
text-align: center;
text-decoration: none;
color: #ffffff;
font-family: 'verdana';
}
.dark-box:hover, .med-box:hover, .light-box:hover
{
opacity: 0.5;
}
.dark-box a, .med-box a, .light-box a
{
text-decoration: none;
color: #ffffff;
font-family: 'verdana';
}
.col-md-2
{
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
transition: opacity .2s ease-in-out;
}
https://codepen.io/adms2000/pen/wvaaxNz
我也不确定为什么文本仅在display: flex
设置为tile
类中的属性时才居中。谢谢!
解决方案
用于:before
样式化您的flex-items
. 看片段。
.col-md-2 {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
transition: opacity .2s ease-in-out;
}
.flex-item {
/*text-align: center;*/
text-decoration: none;
color: #ffffff;
font-family: 'verdana';
width: 25%;
display: flex;
justify-content: center;
align-items: center;
}
.flex-item:before {
content: '';
float: left;
padding-top: 100%;
opacity: 1;
}
.dark-box {
background: #8f6cda;
}
.med-box {
background: #a68fd8;
}
.light-box {
background: #b5a5d7;
}
.flex-item:hover {
opacity: 0.5;
}
.flex-item a {
text-decoration: none;
color: #ffffff;
font-family: 'verdana';
}
<div class="col-md-2">
<div class="dark-box flex-item">
<span>Hello</span>
</div>
</div>
<div class="col-md-2">
<div class="med-box flex-item">
<span>Hello</span>
</div>
</div>
<div class="col-md-2">
<div class="light-box flex-item">
<span>Hello</span>
</div>
</div>
推荐阅读
- python - Visual Studio Code 覆盖集成终端中的 python 解释器
- java - 如何将自定义/动态请求映射到控制器(Spring)?
- jquery - Laravel:在逻辑编程方面需要帮助(电子邮件发送)
- reflection - Haxe 反射方法访问静态字段?
- autodesk-forge - 伪造查看器 - 如何在相机更改事件时将恢复的标记与其上写的标签文本链接
- google-apps-script - Google Apps 脚本:将范围复制到新范围使用连接公式
- reactjs - 我无法正确使用 Expo 实例中的 Audio.Sound。我无法暂停或更新播放状态
- python - 在 Python 中解卷积 Voigt 拟合以提取洛伦兹 FWHM?
- python - 如何将 TF-IDF 矩阵转换为前 10 个单词的整体字典
- python - 如何将大小为 1 的 numpy 数组插入到空的 numpy 数组中?