Html 如何使用 CSS flexbox 设置固定宽度的列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29885284/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set a fixed width column with CSS flexbox
提问by Science
CodePen: http://codepen.io/anon/pen/RPNpaP.
代码笔：http://codepen.io/anon/pen/RPNpaP 。
I want the red box to be only 25 em wide when it's in the side-by-side view - I'm trying to achieve this by setting the CSS inside this media query:
我希望红色框在并排视图中只有 25 em 宽 - 我试图通过在此媒体查询中设置 CSS 来实现这一点：
@media all and (min-width: 811px) {...}
to:
到：
.flexbox .red {
width: 25em;
}
But when I do that, this happens:
但是当我这样做时，会发生这种情况：
http://i.imgur.com/niFBrwt.png
http://i.imgur.com/niFBrwt.png
Any idea what I'm doing wrong?
知道我做错了什么吗？
回答by Stickers
You should use the flexor flex-basisproperty rather than width. Read more on MDN.
您应该使用flexorflex-basis属性而不是width。在MDN上阅读更多内容。
.flexbox .red {
flex: 0 0 25em;
}
The flexCSS property is a shorthand property specifying the ability of a flex item to alter its dimensions to fill available space. It contains:
该flexCSS属性是一个速记属性指定柔性项目，以改变其尺寸以填充可用空间的能力。它包含了：
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 */
A simple demo shows how to set the first column to 50pxfixed width.
一个简单的演示展示了如何将第一列设置为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>See the updated codepenbased on your code.
根据您的代码查看更新的 codepen。
回答by chris_r
In case anyone wants to have a responsive flexbox with percentages (%) it is much easier for media queries.
如果有人想要一个带有百分比 (%) 的响应式 flexbox，媒体查询会更容易。
flex-basis: 25%;
This will be a lot smoother when testing.
这在测试时会顺畅很多。
// VARIABLES
$screen-xs: 480px;
$screen-sm: 768px;
$screen-md: 992px;
$screen-lg: 1200px;
$screen-xl: 1400px;
$screen-xxl: 1600px;
// QUERIES
@media screen (max-width: $screen-lg) {
flex-basis: 25%;
}
@media screen (max-width: $screen-md) {
flex-basis: 33.33%;
}
