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

Question

Как установить столбец фиксированной ширины с помощью 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

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

661 1

html css css3 html5 flexbox

1 ответ:

Comments

Ничего не найдено.

Stickers · Accepted Answer · 2016-04-15 00:35:57

вы должны использовать flex или flex-basis собственность, а не width. Подробнее читайте на MDN.
.flexbox .red {
  flex: 0 0 25em;
}
The 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>
посмотреть обновленный codepen на основе вашего кода.