我希望红色框在并排 View 中时只有 25 em 宽 - 我试图通过在此媒体查询中设置 CSS 来实现此目的:
@media all and (min-width: 811px) {...}
到:
.flexbox .red {
width: 25em;
}
但是当我这样做时,会发生这种情况:
代码笔:http://codepen.io/anon/pen/RPNpaP .
知道我做错了什么吗?
最佳答案
您应该使用 flex
或 flex-basis
属性而不是 width
。在 MDN 上阅读更多内容.
.flexbox .red {
flex: 0 0 25em;
}
flex
CSS 属性是一个速记属性,指定 flex 元素改变其尺寸以填充可用空间的能力。它包含:
flex-grow: 0; /* do not grow - initial value: 0 */
flex-shrink: 0; /* do not shrink - initial value: 1 */
flex-basis: 25em; /* width/height - initial value: auto */
一个简单的演示展示了如何将第一列设置为 50px
固定宽度。
.flexbox {
display: flex;
}
.red {
background: red;
flex: 0 0 50px;
}
.green {
background: green;
flex: 1;
}
.blue {
background: blue;
flex: 1;
}
<div class="flexbox">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
参见 updated codepen基于您的代码。
关于html - 如何使用 CSS flexbox 设置固定宽度的列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29885284/