如何使用CSS flexbox设置固定宽度的列 [英] How to set a fixed width column with CSS flexbox

问题描述

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

在并排视图中，我希望红色框的宽度只有25 em-我正试图通过在此媒体查询中设置CSS来实现这一点:

I want the red box to be only 25 em wide when it's in the side-by-side view - I'm trying to achieve this by setting the CSS inside this media query:

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

收件人:

.flexbox .red {
  width: 25em;
}

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

But when I do that, this happens:

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

知道我在做什么错吗?

推荐答案

您应该使用flex或flex-basis属性而不是width.进一步了解 MDN .

You should use the flex or flex-basis property rather than width. Read more on MDN.

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

flex CSS属性是一种简写属性，用于指定弹性项目更改其尺寸以填充可用空间的能力.它包含:

The flex CSS property is a shorthand property specifying the ability of a flex item to alter its dimensions to fill available space. It contains:

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固定宽度.

---

A simple demo shows how to set the first column to 50px fixed width.

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

根据您的代码，参见更新的代码笔.

这篇关于如何使用CSS flexbox设置固定宽度的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！