☰

justify-content:stretch が機能しないのはなぜですか? 質問する

tag-icon • tag-icon css flexbox
justify-content:stretch が機能しないのはなぜですか? 質問する

以下のコードで 100 ピクセルのアイテムが拡大されないのはなぜですか?

結果は基本的にこれに近いものになります:

[100px|100px|100px|.........]

これは flex-stretch ではなく flex-start によく似ています。これが意図された動作ですか?

を探しています：

[...100px...100px...100px...]


.box {
  display: flex;
  justify-content: stretch;
  width: 500px;
}

.item {
  width: 100px;
}
<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

ベストアンサー1

なぜなら、アイテムの幅を伸縮させたい場合、フレックスアイテムに育つ追加flex-grow: 1;:

(justify-content: stretch;ちなみにここでは全く必要ありません - 効果はありません)

.box {
  display: flex;
  width: 500px;
  border: 1px solid red;
  
}

.item {
  width: 100px;
  border: 1px solid green;
  flex-grow: 1;
}
<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

拡大するのではなく、単にコンテナの幅全体に分散させる場合は、justify-content: space-betweenod を使用します... space-around。

.box {
  display: flex;
  justify-content: space-around;
  width: 500px;
  border: 1px solid red;
}

.item {
  width: 100px;
  border: 1px solid green;
}
<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

おすすめ記事