如何设置一个固定宽度的列与CSS flexbox

我想让红色框在并排视图时只有25 em宽-我试图通过在这个媒体查询中设置CSS来实现这一点:

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

to:

.flexbox .red {
  width: 25em;
}

但当我这样做的时候，会发生这样的事情:

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

知道我哪里做错了吗?

当前回答

您应该使用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 { 显示:flex; ｝ r { 背景:红色; Flex: 0 0 50px; ｝ .green { 背景:绿色; flex: 1; ｝ .blue { 背景:蓝色; flex: 1; ｝ < div class = " flexbox”> < div class = "红色" > < / div > 1 < div class = "绿色" > < / div > 2 < div class = "蓝色" > 3 < / div > < / div >

请根据您的代码查看更新后的代码依赖项。

2015-04-27 00:53:33

其他回答

实际上，如果你真的想使用width CSS属性，另一个解决方法是应用这个:

.flexbox .red {
  width: 100%;
  max-width: 25em;
}

2021-08-27 09:13:31

如果有人想有一个响应百分比(%)的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%;
}

2019-11-29 21:53:08