Cách đặt cột chiều rộng cố định với CSS flexbox

CodePen: http://codepen.io/anon/pen/RPNpaP .

Tôi muốn hộp màu đỏ chỉ rộng 25 em khi ở chế độ xem cạnh nhau - Tôi đang cố gắng đạt được điều này bằng cách đặt CSS bên trong truy vấn phương tiện này:

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

đến:

.flexbox .red {
  width: 25em;
}

Nhưng khi tôi làm điều đó, điều này xảy ra:

http://i.imgur.com/niFBrwt.png

Bất cứ ý tưởng những gì tôi đang làm sai?

Bạn nên sử dụng flexhoặc flex-basistài sản hơn là width. Đọc thêm về MDN .

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

Các flexthuộc tính CSS là một tài sản xác định khả năng của một mục flex để thay đổi kích thước của nó để lấp đầy khoảng trống tốc ký. Nó chứa:

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 */

Một bản demo đơn giản cho thấy cách đặt cột đầu tiên thành 50pxchiều rộng cố định.

.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>

Xem codepen được cập nhật dựa trên mã của bạn.

Trong trường hợp bất cứ ai muốn có một flexbox đáp ứng với tỷ lệ phần trăm (%) thì việc truy vấn phương tiện sẽ dễ dàng hơn nhiều.

flex-basis: 25%;

Điều này sẽ mượt mà hơn rất nhiều khi thử nghiệm.

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