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

Question

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

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

到:

.flexbox .red {
  width: 25em;
}

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

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

知道我做错了什么吗？

Answer 1

您应该使用 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基于您的代码。