☰

CSS フレックスボックスで固定幅の列を設定する方法 質問する

tag-icon • tag-icon html css flexbox
CSS フレックスボックスで固定幅の列を設定する方法 質問する

赤いボックスを並べて表示するときに、その幅を 25 em だけにしたいのですが、次のメディア クエリ内で CSS を設定することでこれを実現しようとしています。

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

に：

.flexbox .red {
  width: 25em;
}

しかし、そうすると次のようになります:

ここに画像の説明を入力してくださいコードペン:http://codepen.io/anon/pen/RPNpaP。

何が間違っているのか分かりますか?

ベストアンサー1

flex/flex-basisではなく、プロパティを使用することをお勧めしますwidth/height。

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

CSSflexプロパティは、フレックス アイテムが利用可能なスペースを埋めるために寸法を変更する機能を指定するためのショートカット プロパティです。次のものが含まれます。

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;
}
.flexbox > div {
  outline: 1px solid;
}
.red {
  flex: 0 0 50px;
  color: red;
}
.green {
  flex: 1;
  color: green;
}
.blue {
  flex: 1;
  color: blue;
}
<div class="flexbox">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

より詳しい情報

flex-direction が row (デフォルト値) に設定されているとします。

  • flex-basis: auto (デフォルト値) 以外の値が明示的に宣言されている場合、flex-basis は幅を上書きします。

  • flex-basis: auto (または指定なし) の場合、最初に幅をチェックし、幅がない場合は要素のコンテンツ幅を使用します。

  • flex-basis は引き続き max-width と min-width に従います。

サイズは次の式に従います:

content —> width —> flex-basis (limited by max-width & min-width)

flex-direction の場合も同様です: column、height、max-height、min-height。

結果が常に一貫したものになるよう、width/height よりも flex-basis を使用するのがベストだと思います。

おすすめ記事