web-dev-qa-db-ja.com

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

私が間違っていることを知っていますか？どうもありがとう。

htmlcsshtml5css3flexbox
80
Science

flexではなく、widthまたはflex-basisプロパティを使用する必要があります。 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>

コードに基づいて 更新されたcodepen を参照してください。

184
Stickers