Как установить столбец с фиксированной шириной с помощью CSS flexbox

CodePen: http://codepen.io/anon/pen/RPNpaP. Я хочу, чтобы в красном поле было всего 25 em, когда оно было в бок о бок - я пытаюсь добиться этого, установив css внутри

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

.flexbox .red {
  width: 25em;
}

но когда я это делаю, это происходит:

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

Любая идея, что я делаю неправильно? Большое спасибо.

Ответ 1

Вы должны использовать свойство 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>