[解決済み】CSSフレックスボックスで固定幅のカラムを設定する方法

質問

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

何が間違っているのでしょうか？

解決方法は？

を使用する必要があります。 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>

をご覧ください。 更新されたコードペン をあなたのコードに基づいて作成します。