如何使用 CSS flexbox 设置固定宽度的列

Question

我希望红色框在并排视图中时只有 25 em 宽 - 我试图通过在此媒体查询中设置 CSS 来实现此目的：

 @media all and (min-width: 811px) {...}

至：

 .flexbox .red {
  width: 25em;
}

但是当我这样做时，会发生这种情况：

代码笔： http ://codepen.io/anon/pen/RPNpaP。

知道我做错了什么吗？

原文由 Science 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您应该使用 flex 或 flex-basis 属性而不是 width 。在 MDN 上阅读更多内容。

 .flexbox .red {
  flex: 0 0 25em;
}

flex CSS 属性是一个速记属性，指定弹性项目改变其尺寸以填充可用空间的能力。它包含：

 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>

---

根据您的代码查看 更新的代码笔。

原文由 Stickers 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果有人想要一个带有百分比 (%) 的响应式 flexbox，那么媒体查询就容易多了。

 flex-basis: 25%;

这样在测试的时候会顺畅很多。

 // 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%;
}

原文由 chris_r 发布，翻译遵循 CC BY-SA 4.0 许可协议