วิธีการตั้งค่าคอลัมน์ความกว้างคงที่ด้วย CSS flexbox

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

ฉันต้องการให้กล่องสีแดงกว้างเพียง 25 ซม. เมื่ออยู่ในมุมมองแบบเคียงข้างกัน - ฉันพยายามทำสิ่งนี้ให้สำเร็จด้วยการตั้งค่า CSS ในข้อความค้นหาสื่อนี้:

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

ถึง:

.flexbox .red {
  width: 25em;
}

แต่เมื่อฉันทำสิ่งนี้เกิดขึ้น:

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

มีความคิดอะไรที่ฉันทำผิดหรือเปล่า?

คุณควรใช้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>

ดูcodepen ที่ปรับปรุงแล้วตามรหัสของคุณ

ในกรณีที่ทุกคนต้องการมีเฟล็กบ็อกซ์ที่ตอบสนองได้ด้วยเปอร์เซ็นต์ (%) การสืบค้นสื่อทำได้ง่ายกว่ามาก

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