☰

単一のフレックスボックス項目を揃える方法（justify-content をオーバーライド） [重複] 質問する

tag-icon • tag-icon css flexbox
単一のフレックスボックス項目を揃える方法（justify-content をオーバーライド） [重複] 質問する

align-itemsフレックス アイテムの場合はでオーバーライドできます。フレックス アイテムをalign-selfオーバーライドする方法を探しています。justify-content

フレックスボックス コンテナーがありjustify-content:flex-end、最初の項目を にしたい場合justify-content: flex-start、どうすればよいでしょうか。

ベストアンサー1

はないようですjustify-selfが、 ¹marginに適した設定で同様の結果を得ることができますauto。たとえば、flex-direction: row(default) の場合は、margin-right: auto子要素を左揃えにするように設定する必要があります。

.container {
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: flex-end;
}
.block {
  width: 50px;
  background: tomato;
}
.justify-start {
  margin-right: auto;
}
<div class="container">
  <div class="block justify-start">justify-start</div>
  <div class="block"></div>
</div>

¹ この行動はFlexbox仕様で定義される。

おすすめ記事