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

CodePen： http ://codepen.io/anon/pen/RPNpaP。 我想要红色框只有25 em宽，当它在并排视图 – 我试图通过设置CSS内部的

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

至

 .flexbox .red { width: 25em; } 

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

View post on imgur.com

任何想法我做错了什么？ 非常感谢。

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>